React中setState更新数组仅生效一次的问题求助

问题场景 #

主组件维护着存储学生课程信息的状态数组myCourses，通过useEffect完成初始化加载。点击触发的ModalComponent组件接收该数组及setMyCourses方法，满足条件时对数组进行修改。但执行setMyCourses后，仅第一次操作能让课程卡片重新渲染；后续重复相同操作（打开模态框执行相同逻辑）时，数组数据虽应发生变化，但页面视觉上无更新。

相关代码片段 #

主组件代码

const [myCourses, setMyCourses] = useState([]);

useEffect(() => {
...
loadMyCourses(setMyCourses)
...
},[]);

...
{myCourses.map((item) => {<Card name={item.name} />})}
...


{condition && <ModalComponent myCourses={myCourses} setMyCourses={setMyCourses}/>}

ModalComponent代码

...
const myCoursesAux = myCourses

myCoursesAux.splice(index, 1);

setMyCourses([...myCoursesAux]);
...

问题根源 #

直接修改了原状态数组的引用：const myCoursesAux = myCourses只是把原状态数组的内存地址赋值给了新变量，splice方法会直接修改原数组。虽然最后用扩展运算符生成了新数组，但第一次修改后原数组已经被篡改，后续操作时，React的状态对比机制会认为前后状态的引用本质上没有发生有效变更（原数组已被修改，新生成的数组内容变化无法被正确检测），导致组件不重新渲染。

修复方案 #

永远不要直接修改React状态，必须基于原状态创建新数组进行修改：

方案一：先拷贝原数组再修改 #

// ModalComponent中修改为：
const myCoursesAux = [...myCourses]; // 用扩展运算符创建原数组的浅拷贝
myCoursesAux.splice(index, 1);
setMyCourses(myCoursesAux);

方案二：使用filter方法生成新数组（更简洁） #

// ModalComponent中直接替换为：
setMyCourses(prevCourses => prevCourses.filter((_, idx) => idx !== index));

这种方式无需手动拷贝数组，filter会返回全新数组，同时使用函数式更新能确保拿到最新的状态值，避免闭包导致的状态过期问题。

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