React useState子组件修改对象属性问题排查

问题1：TypeError: Cannot read properties of undefined (reading 'data') #

这个错误的核心原因是更新state时丢失了原有的data属性，或者初始化country时没有给完整的默认结构。比如直接用setCountry({selectedID: newId})更新，会把原对象里的data完全覆盖，导致子组件读取country.data时拿到undefined。

解决办法：

• 初始化country时必须赋予完整的默认结构，确保data属性存在：

  const [country, setCountry] = useState({
    selectedID: '', // 根据实际业务给默认值
    data: [] // 初始数据，后续可通过API更新
  });
  

• 更新selectedID时，用展开运算符保留原对象的所有属性，只修改selectedID：

  setCountry(prev => ({
    ...prev, // 复制原对象的所有属性（包括data）
    selectedID: newSelectedId // 仅更新目标属性
  }));
  

问题2：Too many re-renders 无限渲染 #

删除valueData={country.data}后触发无限渲染，通常是因为传递给子组件的回调函数在渲染时直接执行了setState，导致组件每次渲染都触发状态更新，进入循环。

解决办法：

• 确保传递给子组件的onChange回调是函数引用，而不是立即执行的表达式。比如不要写：

  // 错误：渲染时会立即调用setCountry，触发无限更新
  <ComboData onChange={setCountry(...)}/>
  

  改成用箭头函数包裹，或者提前定义回调函数：

  // 方式1：箭头函数包裹
  <ComboData onChange={(newId) => setCountry(prev => ({...prev, selectedID: newId}))}/>
  
  // 方式2：提前定义稳定的回调（复杂场景可用useCallback优化）
  const handleSelect = (newId) => {
    setCountry(prev => ({...prev, selectedID: newId}));
  };
  <ComboData onChange={handleSelect}/>
  

完整示例代码 #

父组件

import { useState } from 'react';
import ComboData from './ComboData';

export default function Parent() {
  // 初始化带完整结构的state
  const [country, setCountry] = useState({
    selectedID: '',
    data: [
      { id: 'cn', name: '中国' },
      { id: 'us', name: '美国' }
    ]
  });

  // 定义稳定的回调函数
  const handleCountryChange = (newId) => {
    setCountry(prev => ({
      ...prev,
      selectedID: newId
    }));
  };

  return (
    <div>
      <ComboData
        valueData={country.data}
        selectedId={country.selectedID}
        onChange={handleCountryChange}
      />
    </div>
  );
}

子组件 ComboData

export default function ComboData({ valueData, selectedId, onChange }) {
  return (
    <select value={selectedId} onChange={(e) => onChange(e.target.value)}>
      {valueData.map(item => (
        <option key={item.id} value={item.id}>
          {item.name}
        </option>
      ))}
    </select>
  );
}

关键总结 #

1. 始终保证state对象的结构完整性，初始化和更新时都不要丢失原有属性
2. 更新对象类型的state时，使用展开运算符或函数式更新，避免直接覆盖整个对象
3. 传递给子组件的回调必须是函数引用，禁止在渲染时直接执行setState

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