javascript - 当我更新列表作为其依赖项时，React useEffect 有时不会触发

Question

const mylist = [1,2,3,4,5];
useEffect(() => {
console.log(mylist)
}, [mylist])

这是我的代码的一部分。当我将新元素追加到 mylist 时，useEffect 不会触发，但当我删除元素时，它会触发。

如何修复它，以便在我将新元素附加到 mylist 时触发它

我有一个按钮在执行 onClick(e => mylist.push(e))
和另一个 onClick(e => mylist.remove(e))

Answer 1

您正在创建的数组未存储在状态中，因此每次渲染都会创建一个新数组。解决方案是使用react state:

function MyComponent() {
  const [myList, setMyList] = useState([0,1,2,3,4])

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

  return (
   <div>
     {JSON.stringify(myList)}
     <button onClick={() => setMyList([...myList, myList.length])}>Add</button>
   </div>);
}