React受控组件onChange触发后属性值变为undefined问题求助

核心问题 #

你在setConfig时破坏了原本的数组结构：初始config是数组类型，但setCarType里直接传入了单个对象，导致config被替换成对象，后续config[0]就变成undefined，解构自然拿不到属性值。

修正代码 #

更新state时要保持数组格式，修改数组内的第一个对象：

const [config, setConfig] = useState([{
  carType: "Sedan",
  carColor: "Red"
}]);

// onChange
const setCarType = (e) => {
  // 创建新数组，替换第一个元素，保留数组结构
  setConfig([{ ...config[0], carType: e.target.value }]);
};

const { carType, carColor } = config[0];

关于"Objects are not valid as a react child"错误 #

之前把config设为对象时出现这个错误，是因为你可能直接在JSX中渲染了整个对象（比如写{config}），React无法直接渲染对象类型，你需要渲染对象的具体属性（比如{config.carType}）。

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