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

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

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

    setChartOptions(
    series: {
      data: data
            }
      );

  },[dataSource]);