地图内的复选框没有被选中

Question

我是 react 新手，我正在尝试使用 react 钩子创建一个待办事项应用程序。我有一个数组 todoList，我在无序列表中显示它，每个 todo 元素都有一个复选框。现在，问题是复选框状态在单击时没有改变。我错过了什么？在 OnChange 中，我尝试直接更改 item.isDone 属性，并且我也尝试使用 setTodoList，但在这两种情况下，UI 中都没有发生任何事情。 useForm 只是另一个使用 useState 的模块。

const App = () => {
  const [todoVal, handleChange] = useForm({
    todoValue: "",
  });
  const [todoList, setTodoList] = useState([]);
  return (
    <div>
      <div className="container">
        <h1>Todo Item {todoVal.todoValue}</h1>
        <div className="row">
          <input
            type="text"
            placeholder="Write a todo"
            className="form-control"
            required
            name="todoValue"
            value={todoVal.todoValue}
            onChange={handleChange}
          />
          <button
            className="btn btn-primary btn-lg"
            onClick={() => {
              setTodoList([
                ...todoList,
                {
                  id: Math.floor(Math.random() * 20),
                  isDone: false,
                  value: todoVal.todoValue,
                },
              ]);
            }}
            disabled={!todoVal.todoValue.length}
          >
            Add Todo
          </button>
        </div>
        <div className="row">
          <ul className="list-group">
            {todoList.map((item, idx) => {
              return (
                <li key={item.id} className="list-group-item">
                  <div className="row">
                    <div className="col-xs-8 px-2">
                      <input
                        id={"isDone-" + item.id}
                        type="checkbox"
                        name={"isDone-" + item.id}
                        checked={item.isDone}
                        onChange={(e) => {
                             item.isDone = !item.isDone;
                        }}
                      />
                      <label for={"isDone-" + item.id}>{item.value} - {String(item.isDone)}</label>
                    </div>
                    <button
                      className="btn btn-danger"
                      onClick={() => {
                        const list = todoList.filter(
                          (todoItem) => todoItem.id !== item.id
                        );
                        setTodoList(list);
                      }}
                    >
                      Delete
                    </button>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default App;

Answer 1

只需将输入复选框中的 onChange 更改为

onChange ={ (e) => {
  // item.isDone = !item.isDone; you cannot change item directly as it's immutable
  setTodoList(
    todoList.map((it) =>
      it.id !== item.id ? it : { ...item, isDone: !item.isDone }
    )
  );
}}

说明：item对象是不可变的，所以是todoList。因此，当您想将其属性 isDone 设置为 true 时，您必须创建一个代理副本，然后使用 setTodoList。

所以我们调用 setTodoList 并使用 map 生成 todoList 的副本。如果 id 与您正在检查的不同，我们将保留 todoItem（它在我的代码中）原样，否则我们使用扩展运算符 {...} 创建它的副本并将其 isDone 属性更新为 true。

我们也可以使用immer 来生成一个代理可变对象，我们可以直接编辑它，但我认为在这种简单的情况下是多余的。

为了： 用npm i immer安装immer

在顶部：import {produce} from 'immer'; 那么：

onChange ={ (e) => {
 setTodoList(
    todoList.map((it) =>
      it.id !== item.id ? it : produce(item, (draftItem) => {
        draftItem.isDone = !draftItem.isDone;
      })
    )
  );
}}

Answer 2

您已经有一个索引，因此您不需要遍历列表。您可以创建数组副本并更新特定索引：

onChande={ () => {
  setTodoList((prevTodoList) => {
    // create a copy of todoList
    const updatedTodoList = [...prevTodoList];

    // toggle isDone state at specific index
    updatedTodoList[idx].isDone = !updatedTodoList[idx].isDone;

    return updatedTodoList;
  });
}}

同样的事情可以应用于你的删除方法，所以你不需要过滤整个列表：

onClick={ () => {
  setTodoList((prevTodoList) => {
    // create a copy of todoList, needed because splice mutates array
    const updatedTodoList = [...prevTodoList];

    // remove item at specific index, mutates array
    updatedTodoList.splice(idx, 1);

    return updatedTodoList;
  });
}}