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

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, useEffect hook

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

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: Если вам нужно более подробное объяснение об использовании Effect (оно довольно сложное) и в котором вы решите сомнения по поводу обновления состояния с помощью реквизита, et c Прилагаю статью одним из разработчиков React , который я считаю очень интересным.

Answer 3

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

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