состояние не может быть установлено в функциональном компоненте

Question

Я отправляю параметр dataSource в текущий функциональный компонент, dataSource имеет данные, но состояние chartOptions не может быть установлено. Благодарность...

import React, { useEffect, useState } from "react";

const Trend = ({ dataSource }) => {
  const [chartOptions, setChartOptions] = useState({
    series: {
      data: dataSource.map(x => {
        return ["TEST1", "TEST2"];
      })
    }
  });
  console.log(chartOptions);
  return (
    <div>
      <h1>TEST</h1>
    </div>
  );
};
export default Trend;

Answer 1

Вы должны установить его как это, поскольку он устанавливает состояние до прибытия источника данных. Попробуйте использовать useEffect и установите там состояние, например

  useEffect(() => {
    const data = dataSource.map(x => {
        return ["TEST1", "TEST2"];
      });

    setChartOptions(
    series: {
      data: data
            }
      );

  },[dataSource]);

Answer 2

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

Вы можете увидеть это в документации React, используйте перехватчик Effect

Это может быть реализация:

import React, { useEffect, useState } from "react";

const App = ({ dataSource }) => {
  const [chartOptions, setChartOptions] = useState({});

  useEffect(() => {
    setChartOptions({
      series: {
        data: dataSource.map(x => {
          return ["I'm ", "test2"];
        })
      }
    });
  }, [dataSource]);

  return (
    <div>
      <h1>
        {chartOptions.series &&
          chartOptions.series.data.map(chartOption => <div>{chartOption}</div>)}
      </h1>
    </div>
  );
};

export default App;

Вот пример

PD: Если вам нужно более подробное объяснение об useEffect (это довольно сложно) и о том, где вы решите сомнения по поводу обновления состояния с помощью props и т. Д., Я прилагаю статью одного из разработчиков React, которая, на мой взгляд, очень интересна.

Answer 3

Ленивое начальное состояние - если начальное состояние является результатом дорогостоящих вычислений, вы можете вместо этого предоставить функцию, которая будет выполняться только при начальной визуализации:

const [state, setState] = useState(() => {
  const initialState = {
    series: {
      data: dataSource.map(x => {
        return ["TEST1", "TEST2"];
      })
    }
  }
  return initialState;
});