Question

我正在尝试通过道具设置孩子的状态，但是没有设置，而且我也怀疑为什么BarChart组件在这里渲染那么多次。

“在父组件中获取所有存储值并通过props传递它，否则我应该在子组件中读取存储值并将其设置为本地状态”是一个好习惯？

P.S：redux商店

import React, { useEffect, useRef, useState } from "react";
import Chartjs from "chart.js";

const chartConfig = {
  type: "bar",
  data: {
    labels: ["Red", "Green", "Yellow", "Blue"],
    datasets: [
      {
        label: ["# of Values"],
        data: [2, 10, 9, 25],
      },
    ],
  },
};

const BarChart = (props) => {
  const chartContainer = useRef(null);
  const [chartInstance, setChartInstance] = useState(null);
  const [chartData, setChartData] = useState(null)
  console.log(props.values) //This value coming from server in parent component, this value is correct and logging correct value
 
 useEffect(() => {
    if (chartContainer && chartContainer.current) {
      const newChartInstance = new Chartjs(chartContainer.current, chartConfig);
      setChartInstance(newChartInstance);
    }
  }, [chartContainer]);

  useEffect(() => {

    setChartData(props.values)
    console.log("Yes!, I am In")
  }, [])
  
console.log(chartData) //null[enter image description here][1]
  const updateDataset = (datasetIndex, newData) => {
    chartInstance.data.datasets[datasetIndex].data = newData;
    chartInstance.update();
  };

  return (
    <div style={{ padding: "20px" }}>
      <canvas ref={chartContainer} />
    </div>
  );
};

export default BarChart;

这是此行的控制台屏幕截图，其中49是props.values，62是chartData [1]：https://i.stack.imgur.com/71BI2.png

Answer 1

如果通过道具传递chartData的值，则应该使用这些道具进行chartData初始化。

例如： const [chartData, setChartData] = useState(props.values);

此外，还应在设置chartInstance之前调用updateDataset函数，因为条形图的值会在呈现组件之前传递到BarChart组件。因此，要覆盖chartConfig数据集值，更新初始图表配置很重要。

chartInstance效果的更新看起来像这样：

  useEffect(() => {
    if (chartContainer && chartContainer.current) {
      // added the following line for updating the initial chartConfig
      updateDataset(0, chartData)

      const newChartInstance = new Chartjs(chartContainer.current, chartConfig);
      setChartInstance(newChartInstance);
    }
  }, [chartContainer]);

我建议类似的东西

 const updateDataset = (datasetIndex, newData) => {
    if(chartInstance){
      chartInstance.data.datasets[datasetIndex].data = newData;
      chartInstance.update();
    } else {
      chartConfig.data.datasets[datasetIndex].data = newData;
    }
    
  };

您可以在以下stackblitz页面上参考整个解决方案： https://stackblitz.com/edit/react-bmc5jq

为什么道具没有设置为状态？

1 个答案: