reactjs 无法使用效果将新对象添加到当前状态

n9vozmp4 于 2022-11-29 发布在 React

关注(0)|答案(2)|浏览(163)

我的确有这样一种状态：

const [serviceListData, setserviceListData] = React.useState({});

我想把Id添加到我的当前状态中，所以我在useEffect钩子内实现了我的代码。每次Insurance和count改变时，它都会触发。

React.useEffect(() => {
    if (selectInsurance) {
      setserviceListData({
        ...serviceListData,
        ID: filtered.ID,
      });
    }
  }, [selectInsurance, count]);

但是使用这段代码，我只得到了我的新状态。以前的状态被删除了。我控制台记录了它，得到了下面的结果：

Object {  }
EachInsurance.js:56
Object { ID: 189256 }
EachInsurance.js:56
Object { ID: 189256  }
EachInsurance.js:56
Object {  }
EachInsurance.js:56
Object {  }
EachInsurance.js:56
Object { ID: 189257 }

因此，在第一阶段，我的状态是一个空对象。然后，它得到ID，但只要我选择另一个Insurace，状态被擦除，并替换为新的。
我的代码有什么问题。我以为它会传播旧值（保留它），然后添加新的ID

reactjs

来源：https://stackoverflow.com/questions/74591884/cant-add-new-object-to-the-current-state-with-use-effect

2条答案

按热度按时间

3bygqnnd1#

当你试图在serviceList中添加新值时，你的键ID保持不变。我假设你只想在state中存储id，那么对象不适合在这里使用。相反，你可以使用数组，或者如果你想存储唯一的值，那么使用Set。

数组

const [serviceListData, setServiceListData] = useState([]);

useEffect(() =>{
  setServiceListData((prev)=> [...prev, filtered.ID]);

}, [selectInsurance, count])

SET（如果ID是唯一的）

const [serviceListData, setServiceListData] = useState(new Set());

useEffect(() =>{
  setServiceListData((prev)=> new Set(prev).add(filtered.ID));
}, [selectInsurance, count])

如果要存储与该特定ID相关的数据，则可以像这样使用object：

对象

const [serviceListData, setServiceListData] = useState({});

useEffect(() =>{
  setServiceListData((prev)=> Object.assign(prev, { [filtered.ID]: /*data*/ } ));
}, [selectInsurance, count])

赞(0）回复(0）举报 2022-11-29

q9yhzks02#

希望能有所帮助：

const [serviceListData, setServiceListData] = useState([]);

useEffect(() => {
  if (selectInsurance) {
    setServiceListData([...serviceListData, {ID: filtered.ID}]);
  }
}, [selectInsurance, count]);

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 无法使用效果将新对象添加到当前状态

2条答案

相关问题

热门标签

最新问答