React Hooks中如何更新函数组件状态内的数组数据？

核心思路 #

因为dasboardVal.data是动态传入的props，需要在它变化时同步更新组件内部的data状态，这里用useEffect监听props变化，同时遵循React状态不可变更新的原则，避免直接修改原状态对象。

完整代码示例 #

import { useState, useEffect } from 'react';

const TotalRegistrationCard = ({ dasboardVal }) => {
  // 初始化状态，包含labels和datasets
  const [chartData, setChartData] = useState({
    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // 示例labels，可按需调整
    datasets: [
      {
        label: '注册量',
        data: [], // 初始空数组，后续由props填充
        // 其他样式配置（如颜色、边框等）可按需添加
      }
    ]
  });

  // 监听dasboardVal.data的变化，同步更新状态
  useEffect(() => {
    // 做边界判断，避免props未传入或格式错误
    if (dasboardVal?.data && Array.isArray(dasboardVal.data)) {
      setChartData(prevState => ({
        ...prevState, // 保留原状态的其他字段
        datasets: [
          {
            ...prevState.datasets[0], // 保留原数据集的其他配置
            data: dasboardVal.data // 替换为动态传入的数组
          }
        ]
      }));
    }
  }, [dasboardVal.data]); // 仅当dasboardVal.data变化时触发更新

  return (
    // 组件渲染内容，比如将chartData传入图表组件
    <div>
      {/* 示例：若使用Chart.js，可在此处引入并传入chartData */}
    </div>
  );
};

export default TotalRegistrationCard;

关键细节说明 #

• 不可变更新：通过扩展运算符(...)复制原对象属性，仅修改目标字段，保证状态更新的正确性，避免React因引用未变而不触发渲染。
• 依赖精准控制：useEffect的依赖数组只设置dasboardVal.data，避免不必要的重复渲染。
• 容错处理：增加dasboardVal?.data和Array.isArray的判断，防止props未传入或格式错误导致的报错。

内容的提问来源于stack exchange，提问作者abhigyan kr