无法在功能组件中设置状态答案

【问题标题】：state can not set in functional component无法在功能组件中设置状态
【发布时间】：2020-05-07 10:46:02
【问题描述】：

我向流动的功能组件发送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;

【问题讨论】：

您是否尝试过使用useEffect，
函数是无状态的，你必须使用 Hooks 来设置状态

标签： reactjs state react-functional-component

【解决方案1】：

你应该这样设置它，因为它在数据源到达之前设置状态。尝试使用 useEffect 并在那里设置状态，如

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

    setChartOptions(
    series: {
      data: data
            }
      );

  },[dataSource]);

【讨论】：

【解决方案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;

Here's an example

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

【讨论】：

【解决方案3】：

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

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

【讨论】：