我正在使用 this.setState 更新我的状态，但我仍然在 render() 中接收旧值

Question

class EditLocation extends Component {
  constructor(props) {
   super();
    this.state = {
      LocationId: '',
      locationOptions: [],
    }
    this.baseState = this.state;
    this.findLocationById = this.findLocationById.bind(this);

}
findLocationById = (locationId) => {
  let locationOptions = [];
  if (locationId <= 0) {
    setTimeout(()=>{
      this.setState(this.baseState);
      locationOptions.push(
        <CustomInput
        type="checkbox"
        id={value.LocationTypeId}
        key={value.LocationTypeId}
        value={value.LocationTypeId}
        defaultChecked={false}
        label={`${value.LocationTypeName}`}
        className="mb-0"
        onChange={this.handleCheckbox.bind(this)}
      />
      )
      this.setState({locationOptions:locationOptions})
    },200)
    else {
      setTimeout(() => {
      let location = this.props.store.selectedLocation;
      this.props.store.LocationTypes.forEach((value)=>{
        if(location.LocationTypes ? 
         location.LocationTypes.includes(value.LocationTypeId): false)
        {
          locationOptions.push(
            <CustomInput
            type="checkbox"
            id={value.LocationTypeId}
            key={value.LocationTypeId}
            value={value.LocationTypeId}
            defaultChecked={true}
            label={`${value.LocationTypeName}`}
            className="mb-0"
            onChange={this.handleCheckbox.bind(this)}
          />
          )
        }
        else
        {
          locationOptions.push(
            <CustomInput
            type="checkbox"
            id={value.LocationTypeId}
            key={value.LocationTypeId}
            value={value.LocationTypeId}
            defaultChecked={false}
            label={`${value.LocationTypeName}`}
            className="mb-0"
            onChange={this.handleCheckbox.bind(this)}
          />
          )
        }
      })
    this.setState({
       LocationId: location.LocationId,
       locationOptions: locationOptions,
    })
   

   render(){
  return (
   <div>
    <Modal>
      <Form>
         <FormGroup>
           <input
            value={this.state.LocationId}
            type="text"
            name="Location"
            id="Location"      
           />
         </FormGroup>
         <FormGroup>
           {console.log(this.state.locationOptions)} // showing updated state value
           {this.state.locationOptions} // showing previous state.locationOptions value
         </FormGroup>
        </Form>
    </Modal>
   </div>
   )
}

}

渲染中的

console.log() 正在更新值，因为我对 customInput 的检查没有更新。我需要重新打开模式或重新加载整个程序以查看更新。 任何解决方案和资源都会有所帮助，因为我坚持了几个小时并且似乎无法解决问题。如果有帮助，商店就是 mobx 商店

Answer 1

您以错误的方式使用 setState。

setState() 将组件状态的变化加入队列并告诉 React 这个组件及其子组件需要重新渲染 更新状态。这是您用来更新用户的主要方法 响应事件处理程序和服务器响应的接口。

React docs

1. 所以它是异步的，你不能保证什么时候更新。
2. 在 React 中使用 setTimeout 是一种不礼貌的行为。
3. 以状态存储整个组件，例如locationOptions 也不是好主意。
4. 最好将输入移动到单独的组件，因为我看到只有 defaultChecked 不同。
5. 更好地使用 Hooks，在 React 的方式中更容易考虑这一点，这需要一些时间和精力来弄清楚如何编写 declarative instead of imperative code。

可以重构一点

// sync local state and props is a pain, better to avoid it
  //constructor(props) {
   //super(props);
    //const location = this.props.store.selectedLocation
   // this.state = {
      //LocationId: location.LocationId,
    //}
//}

 const location = this.props.store.selectedLocation;

render() {
    return (
        <div>
            <Modal>
                <Form>
                    <FormGroup>
                        <input
                            value={this.props.store.selectedLocation}
                            type="text"
                            name="Location"
                            id="Location"
                        />
                    </FormGroup>
                    <FormGroup>
                        {this.props.store.cationTypes.map((value) => (
                            <CustomInput
                                type="checkbox"
                                id={value.LocationTypeId}
                                key={value.LocationTypeId}
                                value={value.LocationTypeId}
                                defaultChecked={location.LocationTypes.includes(value.LocationTypeId)}
                                label={`${value.LocationTypeName}`}
                                className="mb-0"
                                onChange={this.handleCheckbox.bind(this)}
                            />}
                        ))
                    </FormGroup>
                </Form>
            </Modal>
        </div>
    );
}