React中setState修改数组后页面未重新渲染的问题

核心问题 #

1. 初始状态类型不匹配：你把datas初始化为字符串''，但后续存储的是数组，类型不一致会引发潜在问题。
2. 数组引用未变更：var newdata = datas只是复制了数组的引用，newdata和原datas指向同一块内存地址。用splice修改newdata时，其实直接修改了原状态数组，而React检测状态变化依赖引用是否改变——引用没变的话，即使数组内容更新，React也会认为状态没变化，不会触发页面重渲染。

修复方案 #

第一步：修正初始状态类型

把初始状态改成空数组，和后续存储的数据类型统一：

const [datas, setData] = useState([]);

第二步：创建数组副本再修改

必须生成原数组的新副本，修改副本后传给setData，确保引用发生变化。以下是几种常用实现方式：

方式1：扩展运算符+slice

const handleClick = (event) => {
    console.log("deleting");
    // 用扩展运算符创建原数组的浅拷贝
    const newdata = [...datas];
    // 修改副本数组
    newdata.splice(1, 1);
    setData(newdata);
};

方式2：用slice拼接生成新数组

const handleClick = (event) => {
    console.log("deleting");
    // 拼接索引1之前和之后的元素，生成新数组
    const newdata = [...datas.slice(0, 1), ...datas.slice(2)];
    setData(newdata);
};

方式3：用filter过滤元素

const handleClick = (event) => {
    console.log("deleting");
    // 过滤掉索引为1的元素，返回新数组
    const newdata = datas.filter((_, index) => index !== 1);
    setData(newdata);
};

关键原理 #

React的状态更新遵循不可变数据原则，只有当你传入全新的引用（比如新创建的数组、对象）时，React才会识别到状态变化，进而触发组件重渲染，更新页面显示。直接修改原状态的引用类型（数组、对象），React无法检测到内部变化，自然不会更新页面。

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