考虑以下代码块:
{split.participants.map(friend => {
return <div key={Math.random()} className="form-check my-2 d-flex align-items-center justify-content-between">
<div className='d-flex align-items-center'>
<FormControlLabel control={<Checkbox
onChange={(e) => {
let temp = sharedByChecks
const t = friend
temp[t] = !temp[t]
console.log("temp:", temp)
setSharedByChecks(temp);
}}
checked={sharedByChecks[friend]} />}
label={friend} />
</div>
</div>
})}
下面是对变量的描述:
split
是一个对象,它有一个名为participants
的字符串数组。这是按预期工作的,因为渲染的结构很好(Map变量friend
按预期工作)sharedByChecks
是一个对象,它的键是everyparticipant
,值是true
或false
,表示他/她的复选框是否应该被选中。例如:
{ rahul:true,sam:false }t
是其值为Map变量friend
的副本。
1.现在单击复选框,当Iconsole.log(temp)
时,它会按预期记录值,在true和false之间切换。
1.然后我使用setSharedByChecks
更新sharedByChecks
,变量的状态不会更新,使用react dev tools扩展确认。因此,即使复选框也不会从选中变为未选中,反之亦然。
有人能指出我哪里做错了吗?如果你需要更多的信息,请发表评论。
1条答案
按热度按时间2g32fytz1#
在JavaScript中,对象是通过引用传递的,这意味着改变它们不会改变存储它们的变量的值。
在你的例子中,你将状态值重新分配给前一个值,这不会导致重新渲染,因为React只有在状态值实际改变时才会重新渲染。
相反,您应该创建一个新对象,如下所示: