未选中复选框时从数组中删除项目在反应中未按预期工作答案

【问题标题】：Removing Item from Array when checkbox is unchecked not working as Expected in react未选中复选框时从数组中删除项目在反应中未按预期工作
【发布时间】：2021-12-11 13:32:03
【问题描述】：

在我的 React Table 中，我有一排带有复选框。每次我选中任何一个框时，我都想将该特定项目的 Id 发送到一个空数组，并在我取消选中时从同一个数组中删除。我试图完成这项工作，但我目前所拥有的并没有按预期工作。第一次单击时，它返回一个空数组，但在第二次单击时添加到数组中。要从阵列中删除，我需要单击两次。链接codesandboxCodesanboxlink

这是我到目前为止所做的事情

import "./styles.css";
import { useState } from "react";

export default function App() {
  const Defaultdata = [
    {
      date_listed: "4 hours ago",
      id: "7857699961",
      delivery_time_frame: "2021-10-25 - 2021-11-14",
      distance: "22.8 km",
      time_stamp: "2021-10-25 16:36:54",
      watched: "yes"
    },
    {
      date_listed: "3 days ago",
      id: "8358962006",
      delivery_time_frame: "2021-10-18 - 2021-10-24",
      distance: "4.3 km",

      time_stamp: "2021-10-22 16:54:12"
    },
    {
      date_listed: "4 hours ago",
      id: "8146462294",
      delivery_time_frame: "2021-10-25",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    }
  ];

  const [newdatatoshow, setnewdatatoshow] = useState([]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <table>
        <thead>
          <th></th>
          <th>Item 1</th>
          <th>Item 2</th>
          <th>Item 3</th>
          <th>Item 4</th>
        </thead>
        <tbody>
          {Defaultdata.map((item, index) => {
            return (
              <tr key={index}>
                <td>
                  {" "}
                  <span
                    onClick={(e) => {
                      setnewdatatoshow([...newdatatoshow, item.id]);
                      if (!e.target.checked) {
                        setnewdatatoshow(newdatatoshow.filter(function(n){ return n !== item.id }))
                        //setnewdatatoshow(newdatatoshow.splice(newdatatoshow.findIndex(data) => data === item.id))

                        
                      }

                      console.log(newdatatoshow);
                    }}
                  >
                    {" "}
                    <input type="checkbox" />{" "}
                  </span>{" "}
                </td>

                <td>{item.id}</td>

                <td>{item.distance}</td>

                <td>{item.date_listed}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

【问题讨论】：

标签： javascript html arrays reactjs next.js

【解决方案1】：

设置useState的值是一个异步操作，需要等到设置好。

一种方法是通过useEffect

  useEffect(() => {
    console.log(newdatatoshow)
  }, [newdatatoshow])

【讨论】：

【解决方案2】：

您无法从当前状态访问更新后的状态。请立即查看useState set method not reflecting 更改以获取更多信息。

您可以做的是在状态变量更新时触发效果并在此处打印更新后的数组

useEffect(() => {
    console.log(newdatatoshow)
  }, [newdatatoshow])

更多详情请查看Array not updating on first click

【讨论】：