React中setState与useEffect在POST/DELETE请求下表现异常问题排查

我有一个存储元素数组的State变量，希望针对状态变化做出响应。点击按钮时会调用API，并根据返回结果修改该状态变量。但使用POST方法时，依赖该状态的useEffect未在控制台输出内容；使用DELETE方法时则一切正常。

代码如下：

useEffect(() => { console.log(myMovies) }, [myMovies]);

function handleMovietoggleLike(movie, metod) {
    if (metod === 'POST') {
        mainApi.postMovies(movie)
            .then((r) => {
                const newMyMovies = myMovies;
                newMyMovies.push(r);
                setMyMovies(newMyMovies);
            })
            .catch((err) => console.log(err))
            .finally(() => {
                return
            })
    }
    if (metod === 'DELETE') {
        mainApi.deleteMoviesId(movie._id)
            .then((r) => {
                const newMyMovies = myMovies.filter(m => m._id !== movie._id);
                setMyMovies(newMyMovies);
            })
            .catch((err) => console.log(err))
    }
    return;
}

期望效果：调用setMyMovies后myMovies变量更新，依赖myMovies的useEffect在每次调用handleMovietoggleLike后输出内容，但只有DELETE方法能触发。

问题根源 #

React的状态更新依赖浅比较判断状态是否变化：

• POST操作的问题：const newMyMovies = myMovies;是直接赋值原数组的引用，newMyMovies.push(r)本质是修改了原状态数组，之后setMyMovies(newMyMovies)传递的还是原来的数组引用，React检测不到状态变化，因此不会触发useEffect。
• DELETE操作正常的原因：filter方法会返回一个全新的数组，传递给setMyMovies的是新引用，React能识别出状态变化，进而触发useEffect。

解决方案 #

修改POST操作中的数组处理逻辑，确保传递给setMyMovies的是新数组引用，以下几种写法都可行：

方法1：用扩展运算符创建新数组

.then((r) => {
    const newMyMovies = [...myMovies]; // 复制原数组到新数组
    newMyMovies.push(r);
    setMyMovies(newMyMovies);
})

方法2：用concat返回新数组

.then((r) => {
    const newMyMovies = myMovies.concat(r); // concat会生成新数组
    setMyMovies(newMyMovies);
})

方法3：函数式更新（推荐，避免闭包旧状态问题）

.then((r) => {
    setMyMovies(prevMyMovies => [...prevMyMovies, r]);
})

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