React Redux渲染报错Cannot set properties of undefined

数据老陈

2026-8-27

报错根本原因

报错是三个问题叠加导致的，和Redux数据加载时序、React状态更新规则、语法兜底缺失都有关系：

可选链空值穿透导致状态被赋值为undefined：editProduct?.variants?.map() 表达式在editProduct或者editProduct.variants不存在时（比如组件首次挂载时Redux异步数据还未返回，store中editProduct为初始空值），会直接返回undefined，执行setVariants(undefined)后，variants状态不再是合法数组，后续遍历自然无法读取数组项。单独测试语句能拿到正确数组，只是因为测试时机晚于Redux数据加载完成的节点，和组件首次挂载的时序不一致。
useEffect依赖缺失导致数据无法同步：原代码中useEffect依赖数组传空[]，仅在组件挂载时执行一次，哪怕后续Redux中editProduct数据加载完成，effect也不会重新执行，状态永远拿不到最新的商品变体数据。
渲染阶段直接修改状态触发类型错误：JSX中<div className='hidden'>{(variant.value = index)}</div>属于渲染阶段直接对对象做赋值操作，违反React渲染纯函数原则；当variants状态为undefined时，遍历拿到的variant本身就是undefined，给undefined设置value属性就会抛出Uncaught TypeError: Cannot set properties of undefined (setting 'value')。

正确实现方案

按照React状态管理规则调整逻辑即可，核心是永远保证状态类型合法、渲染阶段无副作用、effect依赖正确：

组件外定义固定初始值，避免每次渲染重新生成数组引用造成不必要的重渲染
useEffect正确声明editProduct依赖，等Redux数据就绪后同步到本地状态
数据处理阶段统一生成value字段，绝对不要在JSX渲染逻辑中做赋值操作
给可选链结果加外层兜底判断，永远保证传入setVariants的是合法数组，禁止传入undefined

参考代码：

// 组件外定义初始变体值
const initialVariants = [{ label: '', price: '', value: '' }];

const EditProduct = () => {
  // 从Redux store取待编辑商品数据
  const editProduct = useSelector(state => state.product.editProduct);
  const [variants, setVariants] = useState(initialVariants);

  useEffect(() => {
    // 外层判断变体数据存在再做map处理，否则回退到初始值
    if (editProduct?.variants?.length) {
      setVariants(
        editProduct.variants.map((variant, index) => ({
          ...variant,
          value: index // 数据处理阶段统一生成value字段
        }))
      );
    } else {
      setVariants(initialVariants);
    }
  }, [editProduct]); // 正确声明依赖，editProduct更新时重跑同步逻辑

  return (
    <div className="variant-form">
      {variants.map((variant, index) => (
        <div key={variant.value ?? index} className="variant-item">
          {/* 渲染阶段仅读取属性，不做任何赋值修改 */}
          <div className='hidden'>{variant.value}</div>
          <div>
            <label>规格名</label>
            <input 
              value={variant.label} 
              onChange={(e) => {
                // 表单变更逻辑通过不可变更新方式修改variants状态
                const newVariants = [...variants];
                newVariants[index].label = e.target.value;
                setVariants(newVariants);
              }}
            />
          </div>
          <div>
            <label>加价</label>
            <input 
              value={variant.price} 
              onChange={(e) => {
                const newVariants = [...variants];
                newVariants[index].price = e.target.value;
                setVariants(newVariants);
              }}
            />
          </div>
        </div>
      ))}
    </div>
  );
};

注意：此前调整的代码中把?? initialVariants写在map回调函数内部是无效的，空值出现在editProduct.variants这一层，不是单个variant项为空，兜底判断必须写在map外层。

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