Question

我有一个很简单的问题。有人可以告诉我，为什么复选框的状态没有改变？检查中的布尔值会发生变化，但复选框的状态不会发生变化。

function KP() {
  const [name] = useState(["1", "2"]);
  const [check, setCheck] = useState([true, false]);

  const handleChange = (event) => {
    const { id, checked } = event.target;
    const index = name.indexOf(id);
    var temp = check;
    temp[index] = checked;
    setCheck(temp);
  };

  return (
    <div>
      {name.map((n, index) => {
        return (
          <div>
            <p>{n}</p>
            <input type="checkbox" checked={check[index]} onChange={handleChange} id={n} key={n}/>
          </div>
        );
      })}

    </div>
  );
}

Answer 1

这个问题太常见了。 React 不是 DOM 的简单 appender。使用 defaultChecked 而不是选中。

Answer 2

您使用的是同一个数组(var temp = check)。所以组件不会重新渲染。

const handleChange = (event) => {
  const { id, checked } = event.target;
  const index = name.indexOf(id);
  setCheck(prevChecks => {
      const newChecks = [...prevChecks];
      newChecks[index] = checked;
      return newChecks;
  });
};

Answer 3

因为您使用相同的引用（var temp = check;）来更新状态（check）。

试试这个

const handleChange = (event) => {
    const { id, checked } = event.target;
    const index = name.indexOf(id);
    check[index] = checked;
    setCheck([...check]);
};

演示链接here

Answer 4

我相信您在代码中使用了额外的 return _uri.IsAbsoluteUri ? _uri.AbsoluteUri : _uri.ToString(); 数组状态。我根本看不到这方面的用例。

您可以尝试使用此代码并将 name 添加到您的对象中，该对象包含复选框的检查状态:) 这是性能更高的代码并且使用更少的内存。

这是完整的代码演示：

ids

const {useState, useEffect} = React;

function App() {
  const [check, setCheck] = useState([
    { id: 1, checked: true },
    { id: 2, checked: false }
  ]);

  const handleChange = (id) => {
    const updatedItems = check.map((item) => {
      if (item.id === id) {
        item["checked"] = !item["checked"];
        return item;
      }

      return item;
    });

    setCheck(updatedItems);
  };

  return (
    <div>
      {check.map((item, index) => {
        return (
          <div>
            <p>{item.id}</p>
            <input
              type="checkbox"
              checked={item["checked"]}
              onChange={() => handleChange(item.id)}
              id={item.id}
              key={item.id}
            />
          </div>
        );
      })}
    </div>
  );
}

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

复选框状态在反应中不会改变

4 个答案: