Arrays 将对象添加到react钩子数组会使其变为null

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

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

我可以简单地添加第一个元素

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

我可以将其记录下来，并用一个对象获得一个完美的数组

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

NULL

这是有趣的部分。如果我把整件事都记录下来

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

---

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

因为您正在引用

e.target.name

您可能遇到了React取消引用事件对象的常见问题。基本上，React重复使用

e

，并且由于React钩子状态更新的异步执行顺序，

e.target

在执行状态更新时可能未定义

试试这个：

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

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

---

这是一个细微的区别，但是在调用

setFilters（）

之前，您需要“捕获”e.target的值，因为您的状态更新函数不是立即同步执行的，它会进入React update队列，稍后执行。

我们需要更多您在这里获得的代码。我假设您在同一个函数中运行所有这些，当您更改函数顶部的

过滤器

状态，然后再更改下面的状态时，React无法在重新渲染时拆分函数。因此，分享您的功能，我们可以帮助您。