如何获得状态更新基于更新到道具？

Question

我有一个组件，看起来像：

class Table extends Component {
  constructor(props) {
    super(props);

    this.columnDefs = columnDefs;
    this.state = {
      isLoading: true,
      showTimeoutModal: false,
      tableData: [],
      currentDate: null
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    this.setState({
      isLoading: true,
      currentDate: this.props.currentDate
    });

    someApi.getData(this.props.currentDate).then(tableData => this.setState({
      tableData: tableData,
      isLoading: false
    }))
      .catch(error => {
        if (error.message === 'timeout') {
          this.setState({
            showTimeoutModal: true
          });
        } else {
          throw new Error(error.message);
        }
      });
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridApi.sizeColumnsToFit();
  }

  renderGrid() {
    const { tableData, isLoading, showTimeoutModal } = this.state;
    let currentView = null;
    console.log(this.props.currentDate);
    console.log(this.state.currentDate);
    if (!isLoading) {
      if (tableData) {
        currentView =
          <div>
            <AgGridReact
              columnDefs={this.columnDefs}
              rowData={tableData}
              pagination
              paginationPageSize={25}
              headerHeight="43"
              onGridReady={params => this.onGridReady(params)}
              rowSelection="single"
              animateRows="true" />
          </div>;
      } else {
        currentView = <h6>There is no job data to display!</h6>;
      }
    } else if (showTimeoutModal) {
      currentView = <div>
        <TimeoutModalComponent />
        <h6>Timed out</h6>
      </div>;

    } else {
      currentView = <LoadingComponent />;
    }

    return (
      <div>

        {currentView}
      </div>
    );
  }

  render() {
    return (
      <div>
        {this.renderGrid()}
      </div>
    );
  }

}

export default Table;

它从datepicker组件获取currentDate属性，如下所示：

class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.onDateChange = this.onDateChange.bind(this);
    this.state = {
      currentDate: moment(),
      focused: false
    };
  }

onDateChange() {
    this.setState({
      currentDate: this.props.currentDate
    });
  }

  render() {
    return (
      <div className="form-group">


        <SingleDatePicker
          date={this.state.currentDate}
          onDateChange={this.onDateChange}
          focused={this.state.focused}
          onFocusChange={({ focused }) => this.setState({ focused: focused })}
        />
        <TableComponent currentDate={`${this.state.currentDate}`} onDateChange={this.onDateChange} />
      </div>

    );
  }
}

export default DatePicker;

当我从日期选择器中选择新日期时，this.props.current子组件上的日期会更新。这是我想要的日期。但是，当更新该prop时，它不会用新的预期数据重新呈现表。我意识到我必须更新子表的状态才能重新渲染。我试图通过设置当前日期：this.props.current日期来设置ftchData（）方法中的状态。但是这不起作用，它不会实时更新状态，因此网格不会重新渲染。我想我在概念上错过了一些关于反应的东西，但我不确定是什么。我认为datePicker组件很好，因为它可以在选择日期时发送正确的日期，并且可以将该日期传递给表组件。谁能告诉我为什么这个状态不会更新？或者更好的是，当this.props.current日期更新时，处理状态更改的最佳方法是什么？

编辑：我现在可以获得要更改的状态

componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.currentDate !== this.state.currentDate) {
  this.setState({currentDate: nextProps.currentDate});
}

}

但它仍然不会在更新时重新呈现表。

Answer 1

在Table和DatePicker组件中，使用组件didUpdate（PreProps）捕获道具更改事件。

避免使用组件WillReceiveProps。

根据react，使用此生命周期方法通常会导致错误和不一致。组织机构

Answer 2

好的，我可以看到您有多个问题：

• 您在日期选择器和表组件中管理currentDate的状态，这是一个巨大的危险信号，是一个巨大的禁忌，您需要更好地理解“提升状态”

您希望将表组件和日期选择器组件放在父组件中，该父组件控制表组件和日期选择器组件的布局，并管理这两个组件之间共享的状态。这一改变将彻底改变你的方法，解放你的思想，更好地管理你的ReactJs应用程序。这是“提升状态”。您会发现，在我建议的重构之后，您的重新渲染问题很可能根本不存在。