React输入字段状态在handlesubmit后不会更新

Question

我正在使用语义UI库以及React，并在此处遵循其示例以在此处输入

https://react.semantic-ui.com/collections/form

(非常底部的一个(

表格更新了他们的文本，我已经测试过，看看各州是否正在更新，它们是！但是，当我想设置提交/宽度，高度时，颜色向其他颜色指出，它不起作用！它在控制台中给了我这个警告。

./src/components/Holder/HolderInput.jsx
  Line 33:  'submittedWidth' is assigned a value but never used   no-unused-vars
  Line 34:  'submittedHeight' is assigned a value but never used  no-unused-vars
  Line 35:  'submittedColor' is assigned a value but never used   no-unused-vars

代码

import React, {Component} from 'react';
import {Form} from 'semantic-ui-react';
class HolderInput extends Component {
  state = {
    width: '',
    height: '',
    color: '',
    submittedWidth: '',
    submittedHeight: '',
    submittedColor: ''
  };
  handleChange = (e, {name, value}) => this.setState({[name]: value});
  handleSubmit = () => {
    console.log('Called handleSubmit()');
    const {width, height, color} = this.state;
    console.log('Width Value: ' + width);
    console.log('height Value: ' + height);
    console.log('color Value: ' + color);
    console.log('SubmittedWidth Value: ' + this.state.submittedWidth);
    this.setState({submittedWidth: width, submittedHeight: height, submittedColor: color}),
    () => {
      console.log('SubmittedWidth: ' + this.state.submittedWidth);
      this.setState({width: '', height: '', color: ''});
    }
  }
  render() {
    const {
      width,
      height,
      color,
      submittedWidth,
      submittedHeight,
      submittedColor
    } = this.state;
    return (<Form className='holder-input-form' size={'huge'} inverted="inverted" onSubmit={this.handleSubmit}>
      <Form.Group widths={'equal'}>
        <Form.Input placeholder='45px...' name='height' value={height} onChange={this.handleChange}/>
        <Form.Input placeholder='25px...' name='width' value={width} onChange={this.handleChange}/>
      </Form.Group>
      <Form.Input placeholder='exp. #ffffff or white' name='color' value={color} onChange={this.handleChange}/>
      <Form.Button inverted="inverted" size={'big'} color='violet'>Update It!</Form.Button>
    </Form>);
  }
}
export default HolderInput;

运行此代码后，它确实会记录颜色，高度和宽度。但是，它甚至都不承认已提交的状态。它不会返回任何错误，也不会清空输入字段，这表明第一个setstate尚未完成，但我不知道为什么....

Answer 1

@cosmichero2025，您的方法是正确的，只有一些错字，请您更改以下部分并进行测试：

    this.setState({submittedWidth: width, submittedHeight: height, submittedColor: color},
  () => {
    console.log('SubmittedWidth: ' + this.state.submittedWidth);
    this.setState({width: '', height: '', color: ''});
  }
)