reactjs - 无法从孩子执行第二个 setState

Question

我无法在父状态下更新 filterTimeframe。它正在改变 filterDate 罚款。我没有包含代码，但 datePickerApply 从 DatePicker 库中获取值。第二个，setTimeframe 是来自选择下拉列表的 onChange。两者都在子组件中。

更新： 我为 Parent 复制粘贴了错误的代码。

class Child extends React.Component {
    
    constructor(props) {
      super(props);
      this.state = null;
      this.datePickerApply = this.datePickerApply.bind(this);
      this.setTimeframe = this.setTimeframe.bind(this);
    }

    datePickerApply(event, picker) {

      if (typeof this.props.setDate === 'function') {
        this.props.setDate(picker.startDate.format('YYYY-MM-DD'));
      }

    }
    
    setTimeframe(event) {

      if (typeof this.props.setTimeframe === 'function') {
        this.props.setTimeframe(event.target.value);
      }

    }

 }
    
class Parent extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        filterDate: [],
        filterTimeframe: [],
      }

    }

    setDate = (filterDate) => {
      this.setState((state) => {
        return {filterDate: filterDate}
      });
      console.log(this.state.filterDate)
    }

    setTimeframe = (filterTimeframe) => {
      this.setState((state) => {
        return {filterTimeframe: filterTimeframe}
      });
      console.log(this.state.filterTimeframe)
    }

    render() {
      return (
        <div className="container">
          <div className="container-fluid" id="main-header">
            <Child filterDate={this.state.filterDate} filterTimeframe={this.state.filterTimeframe} setDate={this.setDate} setTimeframe={this.setTimeframe}}  />
          </div>
        </div>
      );
    }

}

标签： reactjs

Answer 1

你放console.log错了位置。setState函数是异步的。阅读更多：https ://stackoverflow.com/a/40408976/11285186

setDate = (filterDate) => {
  this.setState((state) => {
    return {filterDate: filterDate}
  }, () => {
    console.log(this.state.filterDate);
  });
}

setTimeframe = (filterTimeframe) => {
  this.setState((state) => {
    return {filterTimeframe: filterTimeframe}
  }), () => {
    console.log(this.state.filterTimeframe);
  });
}