Блог

Я работаю над приложением, в котором есть массив данных, которые пользователь выбирает по времени, Например monthly , weekly и т. Д. В соответствии с этим массив должен отображаться на экране. Я пытался сделать это, в componentWillUpdate чем я не уверен. Но это дало мне ошибку.

Существует выпадающий список, из которого пользователь выбирает timespan значение. Я не знаю, куда мне это поместить, чтобы он прослушивал изменения в timeSpan любой справке, было бы здорово

Вот мой код.

 if (this.state.timeSpan === "yearly") {
      const yearlyData = this.props.dispensingData.duration["yearly"];
      this.setState({ spanData: yearlyData });
    } else if (this.state.timeSpan === "weekly") {
      const weeklyData = this.props.dispensingData.duration["weekly"];
      this.setState({ spanData: weeklyData });
    } 
 

Вам не нужно использовать setState для выбора определенного ключа из prop. Вы должны использовать setState для данных, которые, например, введены пользователем.

 const {timeSpan} = this.state;
let data;
if (timeSpan === "yearly" || timeSpan === "weekly") {
    data = this.props.dispensingData.duration[timeSpan];
}
 

например, вашей функции рендеринга должно быть достаточно для этого случая использования.

Вы можете использовать метод componentDidUpdate (документы здесь: https://fr.reactjs.org/docs/react-component.html#componentdidupdate ),

 componentDidUpdate(prevProps, prevState) {
  if (prevState.timespan !== this.state.timespan) {
    if (this.state.timeSpan === "yearly") {
      const yearlyData = this.props.dispensingData.duration["yearly"];
      this.setState({ spanData: yearlyData });
    } else if (this.state.timeSpan === "weekly") {
      const weeklyData = this.props.dispensingData.duration["weekly"];
      this.setState({ spanData: weeklyData });
    } 
  }
}