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

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

您应该将其设置为 this，因为它在 dataSource 到达之前设置状态。尝试使用 useEffect 并在那里设置状态

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

    setChartOptions(
    series: {
      data: data
            }
      );

  },[dataSource]);

Answer 2

要从一个 prop 计算你自己的 state 的值，你应该使用 useEffect 并将这个 prop 包含在依赖数组中的 hook useEffect 中，以便每当它改变 state 的值时都会更新。

哟可以在 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：如果你想要更广泛的关于 useEffect 的解释（它非常复杂）以及你将在哪里解决关于通过 props 更新状态的疑问等，我附上了一篇我认为非常有趣的 React 开发人员的文章。

Answer 3

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

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