Javascript 复选框未选中

我有一个复选框。如果选中该复选框，则应选中表单检查。但这对我不起作用。我有以下代码：

import React, { useState } from 'react'
import { Row, Form, Container } from 'react-bootstrap'
import subMenu from '../subMenu.js'

function TestScreen() {
const [test1, setTest1] = useState(subMenu)
const subMenuHandler = (e) => {
    let sMenu = test1
    sMenu.forEach(sm => {
        if (sm._id === Number(e.target.value))
            sm.isChecked = e.target.checked
    })
    setTest1(sMenu)
}

这是我的表格：

return (
    <Container fluid>
        <Row className="mx-xs-auto">
            <Form>
                <div key='default-checkbox' className="mb-3" >
                    {test1.map(sm => (
                        <Form.Check
                            type="checkbox"
                            id={sm._id}
                            label={sm.nama}
                            key={sm._id}
                            value={sm._id}
                            checked={sm.isChecked}
                            onChange={subMenuHandler}
                        />
                    ))}
                </div>
            </Form>
        </Row>
    </Container >
)

---

在被检查的状态中有变为真，那么我哪里有错呢？我不理解…

而不是

让sMenu=test1

，而是，

让sMenu=[…test1]

在更新状态之前复制状态，以便react可以检测到新对象引用可用于触发重新渲染

在前面的方法中，您只是使用不同的变量名指向同一个对象（数组也是一个对象）

---

在深入研究任何UI框架之前，还需要进一步了解JS中的原语和非原语。另一个重要的概念是浅复制与深复制当涉及到对象时。

要在React中正确更新状态，您应该为正在修改的每个片段创建一个副本，而不是直接变异。当您执行

让sMenu=test1

时，您传递的是相同的引用，而不是创建副本

不仅要复制阵列，还要复制要更改的对象。对于真正嵌套的对象，这可能会有点混乱，因为您会发现自己创建了很多副本

下面是一种不会改变你的状态的方法：

const subMenuHandler = (e) => {

    setTest1(sMenu => (
      sMenu.map(sm => {
        if (sm._id === Number(e.target.value)) return sm
        return { ...sm, isChecked: e.target.checked } 
      })
    ))
}

需要注意的几件事：

• 创建要更新的对象

  sm

  的副本。你不能像

  sm.isChecked=e.target.checked那样直接改变它
  
  

• 如果正在使用，则不需要在数组上使用spread运算符，因为它已经返回了一个新数组，并且不会对任何内容进行变异。如果您使用spread操作符也可以，但是您将创建另一个在这种情况下不必要的交互。如果以下逻辑使对象本身发生变化，则“扩展”操作符是好的

const subMenuHandler = (e) => {

    setTest1(sMenu => (
      sMenu.map(sm => {
        if (sm._id === Number(e.target.value)) return sm
        return { ...sm, isChecked: e.target.checked } 
      })
    ))
}