如何从容器更新组件的状态？

Question

我有这张图表，根据用户按下的按钮显示每周或每月的数据。我还设置了 Saga、Redux、Container 和组件。到目前为止，我的道具中有两个值，一个用于每月数据，一个用于每周。但是，我希望图表根据用户输入的日期显示数据。因此，每次用户输入两个新日期并点击 go 时，道具都需要更新。

目前，我可以调用我的 get 函数并使用我的容器检索数据并更新我容器中的状态。但是，我不确定如何让我的图表更新它呈现的数据。我怎样才能得到它，以便当用户输入两个日期并按下按钮时，组件会注意到道具和更新的变化？我考虑过使用 ComponentWillUpdate 等，但我不知道这是否会 work/where 开始，我是否需要的不仅仅是 componentWillUpdate。

组件：

构造器 ->

  constructor(props) {
      super(props);

      this.state = {
        startDate: 'userInputStart',
        endDate: 'userInputEnd,
      }

      this.handleMClick = this.handleMClick.bind(this);
      this.handleWClick = this.handleWClick.bind(this);
    }

为图形调用数据的位置 ->

       let data = this.props.graphData;
       return(
          <div className='graph'>
            <div className='buttons'>
              <button className={this.state.monthly} onClick={this.onClickMonthly()}>Monthly</button>
              <button className={this.state.weekly} onClick={this.handleWClick.bind(this)}>Weekly</button>
            </div>
            <div className='graphData'>
            <LineChart width={730} height={250} data={data}
              margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="2"/>
              <YAxis />
              <Tooltip />
              <Legend />
              <Line type="monotone" dataKey="5" stroke="#8884d8" />
            </LineChart>
            </div>
          </div>
         );

感谢阅读。

Answer 1

您可以将 redux 调度程序传递到您的图形组件中，并在用户输入日期范围并单击提交按钮时通过 prop 更新日期（这将反映 graphData）。

--------- STEP 1
// your container file which imports the graph component like the example below
class YourGraphContainer extends React.Component {
  render() {
    // do your logic to update the graphData in `yourReduxDispatcher`
    return <Graph graphData={graphData} updateDateRange={yourReduxDispatcher} />
  }
}

--------- STEP 2
// then in your graphComponent.jsx
class Graph extends React.Component {
  constructor() {
    super();
    this.state = {
      startDate: 'userInputStart',
      endDate: 'userInputEnd',
    }
  }

  updateRange = () => {
    const { startDate, endDate } = this.state;
    this.props.updateDateRange(startDate, endDate);
  }

  render() {
    <DateRangePicker
      startDate={this.state.startDate}
      endDate={this.state.endDate}
      onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate 
      })}
    />
    <button onClick={this.updateRange}>Update Graph Data</button>
  }
}

如何从容器更新组件的状态？

How to update state of component from a container?

javascript

lifecycle

reactjs