时间戳

首页 > 解决方案 > 为什么道具没有设置为状态？

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

问题描述

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

哪个是“获取父组件中的所有存储值并通过道具传递它，或者我应该读取子组件中的存储值并将其设置为本地状态”的好习惯？

PS：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

标签： reactjsreact-redux

解决方案

如果您通过 props 传递 chartData 的值，那么应该使用这些 props 进行 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

推荐阅读