从对象数组中删除对象 - 反应答案

【问题标题】：removing object from array of objects - react从对象数组中删除对象 - 反应
【发布时间】：2022-09-29 21:59:10
【问题描述】：

为什么这不会从列表中删除项目而仅适用于 console.log？如您所见，我在稍后分配给按钮的功能中更新列表。

let DATA = [
  {
    id: 1,
    name: \"item1\"
  },
  {
    id: 2,
    name: \"item2\"
  }
];

const App = () => {
const deleteItem = (id) => {
    DATA = DATA.filter((item) => item.id !== id);
    console.log(DATA);
  };

  return (
    <div className=\"App\">
      {DATA.map((item) => (
        <p key={item.id} onClick={() => deleteItem(item.id)}>
          {item.name}
        </p>
      ))}
    </div>
  );
}

const root = ReactDOM.createRoot(
  document.getElementById(\"root\")
).render(<App/>);

<div id=\"root\"></div>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js\"></script>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js\"></script>

标签： javascript reactjs

【解决方案1】：

它会删除它，但反应不会重新渲染。您必须使用 setState 方法来触发重新渲染，您可以将DATA 的副本放在状态变量中。

【讨论】：

【解决方案2】：

它确实从列表中删除了该项目。但是没有告诉组件重新渲染 UI。

你正在寻找的是状态在反应。更新状态会触发组件重新渲染：

const App = () => {
  // store the data in state
  const [data, setData] = React.useState([
    {
      id: 1,
      name: "item1"
    },
    {
      id: 2,
      name: "item2"
    }
  ]);

  const deleteItem = (id) => {
    // update state with the new data
    setData(data.filter((item) => item.id !== id));
  };

  return (
    <div className="App">
      {data.map((item) => (
        <p key={item.id} onClick={() => deleteItem(item.id)}>
          {item.name}
        </p>
      ))}
    </div>
  );
}

const root = ReactDOM.createRoot(
  document.getElementById("root")
).render(<App/>);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

【讨论】：