Question

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

当前，我能够调用我的get函数并使用我的容器检索数据并更新我的容器中的状态。但是，我不确定如何获取图形以更新其显示的数据。我如何获得它，以便当用户输入两个日期并按下按钮时，组件会注意到道具和更新的变化？我曾考虑过使用ComponentWillUpdate等，但我不知道这样是否行得通/从哪里开始，是否我需要的不只是componentWillUpdate。

组件：

构造函数->

if (LDAP-Group == "group1" && LDAP-Group == "group2") {
    ...
}

调用图形的数据->

  constructor(props) {
      super(props);

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

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

感谢您阅读。

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>
  }
}

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

1 个答案: