将 object 添加到反应钩子数组会导致它转动 null [关闭]

Question

我设置了一个空的对象数组

const [filters, setFilters] = useState([]);

我可以轻松添加第一个元素...

setFilters(prevState => [...prevState, {name: e.target.name, value: e.target.value}])

我可以通过控制台记录并使用一个 object 获得一个完美的阵列。

当我 go 使用上面相同的代码添加第二个过滤器然后控制台记录它时，我得到NULL 。

这是有趣的部分。 如果我控制台记录整个事情。

setFilters(prevState => console.log([...prevState, {name: e.target.name, value: e.target.value}]))

我得到了我需要的对象数组。

Answer 1

由于您引用的是e.target.name ，您可能会遇到 React 取消引用您的事件对象的常见问题。 基本上，React 重复使用e ，并且由于 React 钩子 state 更新的异步执行顺序， e.target可能在您的 state 更新执行时未定义。

尝试这个：

const newObject = {name: e.target.name, value: e.target.value};

setFilters(prevState => {
  return [...prevState, newObject];
)

这是一个细微的区别，但是您需要在调用setFilters()之前“捕获” e.target的值，因为您的 state 更新 function 不会立即同步执行，它会进入 React 更新队列并稍后执行。