Question

我有一个函数，该函数生成要添加到状态的对象。我正在使用反应挂钩。这是我的代码：

const [roomMatches, setRoomMatches] = useState({
                                         "user2":{ "percentMatch":"1.0"},
                                         "user3":{ "percentMatch": ".30"}
                                               })

var newMatch = {
                 survey:{
                            ['percentMatch']: .99
                        }
               }

setRoomMatches([...roomMatches, newMatch]);

我的问题是我总是遇到相同的错误

Uncaught TypeError: roomMatches is not iterable

如何添加到当前状态而又不删除已经就绪的状态？

Answer 1

您似乎要执行的操作是将newMatch合并到现有roomMatches中，然后更新状态。为此，您需要执行以下操作：

const newState = {...roomMatches, ...newMatch};
setRoomMatches(newState);

在上面的代码中，您尝试使用数组而不是对象更新状态（并且正如注释所建议的，将对象散布到数组中将无效）。

Answer 2

正如Jayce444所指出的那样，您正在尝试将roomMatches对象散布到不可能的数组中。

我相信您想要这样的东西：

const [roomMatches, setRoomMatches] = useState({
  user2: { percentMatch: '1.0' },
  user3: { percentMatch: '.30' },
});

var newMatch = {
  survey: {
    percentMatch: 0.99,
  },
};

setRoomMatches({ ...roomMatches, newMatch });

P.S。我不确定这是否是故意的，但您可能会在致电newMatch时也传播setRoomMatches。

将对象添加到状态时（使用react挂钩）时的React.js错误

2 个答案: