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

您应该将其设置为此，因为它设置了dataSource到达之前的状态。尝试使用useEffect并将状态设置为

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

    setChartOptions(
    series: {
      data: data
            }
      );

  },[dataSource]);

Answer 2

要从道具计算您自己的状态值，您应该使用useEffect并将此道具包含在依赖项数组中的hook useEffect中，以便每当状态更改时，状态值就会更新。

您可以在React文档useEffect hook

中看到它

这可能是一个实现：

Events: update

Here's an example

PD：如果您想对useEffect进行更广泛的解释（这非常复杂），并且在哪里可以解决通过道具更新状态的疑问，等等，我附上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;
});

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

3 个答案: