我正在使用 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() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.

React docs

所以它是异步的，您无法保证更新何时发生。
在 React 中使用 setTimeout 是不礼貌的。
将整个组件存储在状态中，例如locationOptions 也不是个好主意。
最好将输入移动到单独的组件，因为我只看到 defaultChecked 不同。
用Hooks比较好，用React的方式去想更容易，想明白怎么写declarative instead of imperative code.[=29需要一些时间和精力=]

可以稍微重构一下

// 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>
    );
}

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

I am updating my state using this.setState but still i am recieving the old values in render()

javascript

setstate

reactjs