Невозможно обновить состояние в ReactJS - PullRequest
0 голосов
/ 31 марта 2020

Я строю визуализацию данных, где мне нужно передать данные из API в компонент диаграммы. Компонент диаграммы загружается нормально в первый раз, но при последующих попытках диаграмма не загружается без каких-либо ошибок. Я подозреваю, что это проблема с обновлениями состояний в компоненте диаграммы. После отладки я обнаружил, что состояние не обновляется периодически, из-за чего диаграмма не загружается. Вот как выглядит код

HomePage. js

async componentDidMount() {
    await this.getDataFromApi(); //Gets data for the charts
    await this.prepareDataForChart(); //Prepares the data for the charts
}

/*When the new date range is selected and the submit button is clicked, 
  this method handles the click and gets the new data and prepares it for the chart*/

async handleButtonClick() {
    await this.getDataFromApi();
    await this.prepareDataForChart();
    this.setState({ shouldRefresh: true });
}
/*This is where I pass the data to the chart component*/
 <LineChart
     chartData={this.state.chartTotalPopulation}
 />

В компоненте диаграммы я получаю данные из реквизита и устанавливаю состояние и Насколько я понимаю, всякий раз, когда состояние изменяется, диаграмма должна перерисовываться (это работает, но в некоторых случаях состояние никогда не устанавливается или устанавливается на пустой объект, из-за которого диаграмма не создается

Компонент диаграммы

this.state = {
        chartData: {}
    };
}

componentDidUpdate() {
    let chartData = this.props.chartData;
    //Check before updating the state to avoid infinite dom updates
    if (chartData.labels.length > 0 && this.state.chartData.labels.length ===0) { 
      this.setState({ chartData: chartData });
    }
}

render() {
    return (
        <div className="chartContianer">
            <Line data={this.state.chartData}/>
        </div>
    );
  }

Любые предложения о том, что я здесь делаю неправильно? Как я могу убедиться, что состояние правильно установлено в компоненте диаграммы?

Ответы [ 3 ]

0 голосов
/ 31 марта 2020

Непосредственное прохождение this.props.chartData в компоненте диаграммы вызовет повторное рендеринг вместо того, чтобы заново устанавливать состояние в компоненте диаграммы

0 голосов
/ 01 апреля 2020

Для тех, кто может столкнуться с той же проблемой, я исправил ее, внеся следующие изменения

  1. Я обновлял состояние и вызывал следующую функцию одну за другой. Я изменил его так, чтобы следующая функция вызывалась в обратном вызове setState.
  2. В дочернем компоненте я добавил функцию componentShouldUpdate (), в которую я добавил возвращаемое значение false для ненужных повторных рендеров
0 голосов
/ 31 марта 2020

Попробуйте установить состояние в ChartComponent, используя метод жизненного цикла componentWillReceiveProps.

componentWillReceiveProps (){
 let chartData = this.props.chartData;
    //Check before updating the state to avoid infinite dom updates
    if (chartData.labels.length > 0 && this.state.chartData.labels.length ===0) { 
      this.setState({ chartData: chartData });
    }
}
...