状态不能在功能组件中设置

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;

Here's an example

PD：如果你想更广泛地解释 useEffect（它相当复杂）以及你将在哪里解决通过 props 更新状态等方面的疑虑，我附上我认为非常有趣的 an article by one of the developers of React。

Answer 3

惰性初始状态 - 如果初始状态是昂贵计算的结果，您可以提供一个函数，该函数将仅在初始渲染时执行：

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

状态不能在功能组件中设置

state can not set in functional component

state

reactjs

react-functional-component