表值在反应中没有变化

Question

我从 API 获取数据并从前端更改值以将其显示在表格中。我获取对象列表并将其存储在一个状态中并在 html 表中显示该状态下的对象。该表有一个复选框来显示一个布尔值。如果该值为 true，则复选框中的 defaultChecked 为 true。表格标题中有一个复选框可以选中或取消选中所有项目。

以下是我获取的json对象。

{
completed: false
id: 1
title: "delectus aut autem"
userId: 1
}

如果我选中表头中的复选框，我想在所有 200 个项目中将 completed 设置为 true。

以下是设置所有项目为真或假的代码。

const checkAllHandler = (e) => {
    let val = e.target.checked;
    console.log(val);
    let allTodoList = [];

    if (val === true) {
      if (todo.length > 0) {
        
        for (let index = 0; index < todo.length; index++) {
          const newObject = {
            userId: todo[index].userId,
            id: todo[index].id,
            title: todo[index].title,
            completed: true,
          };
          allTodoList.push(newObject);
        }
        setTodo(allTodoList);
        
      }
    } else if (val === false) {
      if (todo.length > 0) {
       
        for (let index = 0; index < todo.length; index++) {
          const newObject = {
            userId: todo[index].userId,
            id: todo[index].id,
            title: todo[index].title,
            completed: false,
          };
          allTodoList.push(newObject);
        }
        setTodo(allTodoList);
        
      }
    }
  };

当我控制todo 状态时，所有值都会更新为真或假，但它不会显示在表格上。 该表具有过滤功能。如果我过滤一个单词并返回，那么整个表的值都会发生变化。我想在单击复选框时显示更改，而不是在搜索和返回时显示更改。我该怎么做？

组件的完整代码如下。

const DataTable = () => {
  const { loading, items } = useSelector((state) => state.allData);
  // console.log(items)

  const dispatch = useDispatch();
  // const history = useNavigate();

  const [searchText, setsearchText] = useState("");
  const [todo, setTodo] = useState(items);
  console.log("todo");
  console.log(todo);
  const [isFetch, setisFetch] = useState(false);
  const [checkedloading, setcheckedLoading] = useState(false);
  const [isChecked, setisChecked] = useState(false);
  console.log(isChecked);

  useEffect(() => {
    const setDataToState = () => {
      if (loading === false) {
        setTodo(items);
      }
    };
    setDataToState();
  }, [loading]);

  useEffect(() => {
    
    dispatch(getData());
    // setTodo(items)
    // console.log(items)
  }, [dispatch]);
  //etTodo(items)
  const handleSearch = (event) => {
    //let value = event.target.value.toLowerCase();
    setsearchText(event.target.value);
  };

  const onChangeHandler = (e, item) => {
    console.log(e.target.checked);
    console.log(item);

    if (e.target.checked === true) {
      // const item = todo.filter(x=> x.id === id)
      // console.log("added")
      // console.log(item)

      for (let index = 0; index < todo.length; index++) {
        if (todo[index].id === item.id) {
          console.log(todo[index]);
          console.log("deleting");
          todo.splice(index, 1);
          console.log("deleted");
          const newObject = {
            userId: item.userId,
            id: item.id,
            title: item.title,
            completed: true,
          };
          console.log("adding updated object");
          todo.splice(index, 0, newObject);
          console.log("added");

          console.log(todo);
        }
      }
    } else {
      // const item = todo.filter(x=> x.id === id)
      // console.log("removed")
      // console.log(item)
      for (let index = 0; index < todo.length; index++) {
        if (todo[index].id === item.id) {
          console.log(todo[index]);
          console.log("deleting");
          todo.splice(index, 1);
          console.log("deleted");
          const newObject = {
            userId: item.userId,
            id: item.id,
            title: item.title,
            completed: false,
          };
          console.log("adding updated object");
          todo.splice(index, 0, newObject);
          console.log("added");

          console.log(todo);
        }
      }
    }
  };

  const onSubmitHandler = () => {
    localStorage.setItem("items", JSON.stringify(todo));
  };
  const getItem = () => {
    const items = localStorage.getItem("items");
    console.log("local storage items");
    console.log(JSON.parse(items));
  };

  const checkAllHandler = async (e) => {
    const { checked } = e.target;
    console.log(checked);
    setTodo((todos) =>
      todos.map((todo) => ({
        ...todo,
        completed: checked,
      }))
    );
   
  };

  return (
    <>
      {console.log("todo in render")}
      {console.log(todo)}
      <div className={styles.container}>
        <div className={styles.top}>
          <div className={styles.search_bar}>
            <input
              type="text"
              onChange={(e) => handleSearch(e)}
              placeholder="search by name"
            />
          </div>
        </div>

        <div className={styles.btn_container}>
          <button onClick={onSubmitHandler}>Submit</button>
        </div>

        <div className={styles.data_table_container}>
          {checkedloading === false ? (
            <>
              <div className={styles.data_table}>
                {loading || todo === null || todo === undefined ? (
                  <>
                    <p>Loading!!</p>
                  </>
                ) : (
                  <>
                    <table>
                      <tr>
                        <th>ID</th>
                        <th>userId</th>
                        <th>Title</th>
                        <th>
                          <>
                            Completed
                            <input type="checkbox" onChange={checkAllHandler} />
                          </>
                        </th>
                      </tr>
                      <tbody>
                        {todo
                          .filter((val) => {
                            if (searchText === "") {
                              return val;
                            } else if (
                              val.title.toLowerCase().includes(searchText)
                            ) {
                              return val;
                            }
                          })
                          .map((item) => (
                            <>
                              <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.userId}</td>
                                <td>{item.title}</td>
                                <td>
                                  <input
                                    type="checkbox"
                                    defaultChecked={item.completed}
                                    onClick={(e) => onChangeHandler(e, item)}
                                  />
                               
                                </td>
                               
                              </tr>
                            </>
                          ))}
                      </tbody>
                    </table>
                  </>
                )}
              </div>
            </>
          ) : (
            <>Loading</>
          )}
        </div>
      </div>
    </>
  );
};

代码沙盒链接：https://codesandbox.io/s/flamboyant-proskuriakova-60t19

Answer 1

我在这段代码中没有看到任何明显的问题，但它非常冗长。除了分配的completed 布尔值之外，两个逻辑分支都是相同的。在 React 中更新数组时，通常使用functional state updates 来制作先前状态的浅表副本，而不是在回调范围内可能关闭的任何状态。

例子：

const checkAllHandler = (e) => {
  const { checked } = e.target;
  console.log(checked);
  setTodo(todos => todos.map(todo => ({
    ...todo,
    completed: checked,
  })));
};

如果从这里更新表格还有其他问题，请添加其余的组件代码和您认为相关的任何其他代码。

更新

表格中没有任何复选框输入发生变化的原因是因为您使用了 defaultChecked 属性，这使得这些输入完全不受控制输入。它们在安装时采用初始 item.completed 值，并且不会从那里更改，除非您与复选框交互。

如果您希望它们响应todo 状态的更改/更新，则应将它们转换为完全受控 输入并使用checked 属性。

<input
  type="checkbox"
  checked={item.completed}
  onClick={(e) => onChangeHandler(e, item)}
/>

更新 #2

各个复选框输入在onChangeHandler 中被更改为Array.prototype.splice。 .splice 进行就地突变。再次，应该使用功能状态更新来浅拷贝先前的状态，并通过 id 检查匹配的 todo 对象。

const onChangeHandler = (e, item) => {
  const { checked } = e.target;

  setTodo((todos) =>
    todos.map((todo) =>
      todo.id === item.id
        ? {
            ...todo,
            completed: checked
          }
        : todo
    )
  );
};