React Multiple Checkboxes 在更改后不可见答案

【问题标题】：React Multiple Checkboxes are not visible as selected after changeReact Multiple Checkboxes 在更改后不可见
【发布时间】：2020-10-20 19:52:49
【问题描述】：

我有一个复选框列表。即使value 已更改，复选框也不会显示为选中状态。

下面是我的代码：-

import React, { useState } from "react";
import { render } from "react-dom";

const CheckboxComponent = () => {
  const [checkedList, setCheckedList] = useState([
    { id: 1, label: "First", isCheck: false },
    { id: 2, label: "Second", isCheck: true }
  ]);

  const handleCheck = (e, index) => {
    checkedList[index]["isCheck"] = e.target.checked;
    setCheckedList(checkedList);
    console.log(checkedList);
  };

  return (
    <div className="container">
      {checkedList.map((c, index) => (
        <div>
          <input
            id={c.id}
            type="checkbox"
            checked={c.isCheck}
            onChange={e => handleCheck(e, index)}
          />
          <label htmlFor={c.id}>{c.label}</label>
        </div>
      ))}
    </div>
  );
};

render(<CheckboxComponent />, document.getElementById("root"));

我在循环外的一个简单复选框上工作得很好。我不确定问题出在哪里。

这是链接 - https://codesandbox.io/s/react-multiple-checkboxes-sczhy?file=/src/index.js:0-848

【问题讨论】：

你的 checklist 状态没有改变，所以在这种情况下 react 不会重新渲染
我正在做 setCheckedList(checkedList)。为什么它没有反映我的更改？
对那个数组的引用还是一样的，唯一改变的是它的属性

标签： reactjs checkbox

【解决方案1】：

因为你将一个数组传递给状态，所以如果你想要你的反应组件重新渲染，你必须让反应知道你的状态改变了。在您的 handleCheck 上，您只需更改该数组中值的属性，因此不会更改引用。

handleCheck 函数应该是这样的

  const handleCheck = (e, index) => {
    const newCheckList = [...checkedList];
    newCheckList[index]["isCheck"] = e.target.checked;
    setCheckedList(newCheckList);
  };

【讨论】：

【解决方案2】：

改为这样做：

const handleCheck = (e, index) => {
    setCheckedList(prevState => {
        const nextState = prevState.slice()
        nextState[index]["isCheck"] = e.target.checked;
        return nextState
    });
};

由于checkedList 是一个数组，（被视为对象并按此方式处理），更改属性不会更改数组本身。所以 React 可以知道发生了什么变化。

【讨论】：