时间戳

首页 > 解决方案 > 当我将列表更新为其依赖项时，React useEffect 有时不会触发

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

问题描述

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

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

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

我有一个按钮在做onClick(e => mylist.push(e))
，另一个按钮在做onClick(e => mylist.remove(e))

标签： javascriptreactjs

解决方案

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

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>);
}

推荐阅读