使用useState更新数组对象时父组件状态未变更该如何解决？

React的useState对引用类型的状态更新采用浅比较逻辑，只有传入的新状态和旧状态的引用地址不同时，才会触发重渲染。你当前的写法直接修改了原state数组内部的对象属性，数组本身的引用地址没有发生变化，React会判定状态未更新，所以父组件不会响应状态变化。

需要先对原数组和要修改的目标对象创建新副本，再将新数组传递给父组件的状态更新方法，修正后的子组件代码如下：

const updateData = props.setDataState; 
const thisComponentData = props.dataToUs;
// 此处的originalData对应你原来代码里的data，即父组件传递的原始数据数组
const originalData = props.dataToUs;
 
const handleUpdateData = () => {
    // 创建原数组的浅拷贝，变更数组引用
    const newData = [...originalData];
    const getIndex = newData.findIndex((item) => item.id === thisComponentData.id);
    // 边界处理：找不到对应项直接终止执行
    if (getIndex === -1) return;
    // 对要修改的目标对象及嵌套属性创建新副本，避免修改原对象
    const targetItem = {
        ...newData[getIndex],
        category: {
            ...newData[getIndex].category,
            // 直接赋值最终值即可，不需要重复赋值1再改2
            vehicles: 2
        }
    };
    // 替换新数组中的目标项
    newData[getIndex] = targetItem;
    // 传入新数组触发父组件状态更新
    updateData(newData)
};

1. 如果你的数据嵌套层级超过3层，可以使用深拷贝方法或者immer库来简化不可变数据的修改逻辑，避免漏改引用导致的更新失效问题。
2. 你父组件示例中渲染的组件命名<Parent />大概率是笔误，实际应该渲染子组件标签，这个命名问题不影响核心逻辑的运行。

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