反应：无法过滤组件列表答案

【问题标题】：React: Unable to filter list of components反应：无法过滤组件列表
【发布时间】：2021-05-31 23:09:28
【问题描述】：

我正在尝试创建一个可以随时添加和删除的表格字段列表。

问题

只要我点击删除中间的任何元素（除了最后一个），它就会删除它下面的所有项目

代码是here

我不确定是什么做错了，它会删除所有元素，即使我尝试删除特定元素。

这里也添加代码

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

const ListComponent = ({ remove, id }) => {
  return (
    <tr>
      <td>
        <input />
      </td>
      <td><button onClick={() => remove(id)}>Delete</button></td>
    </tr>
  )
}

const App = () => {
  const [array, setArray] = useState([]);
  const remove = (itemId) => {
    setArray(array.filter(each => each.id !== itemId))
  }
  const addListComponent = () => {
    let id = uuidv4();
    setArray(oldArray => [...oldArray, {
      id,
      jsx: <ListComponent key={id} id={id} remove={remove}/>
    }])
  }
  return (
    <div>
      <button onClick={addListComponent}>Add ListComponent</button>
      {array.length > 0 && array.map(each => each.jsx)}
    </div>
  )
}

export default App;

【问题讨论】：

这不是变异，而是关闭问题。过滤器不会改变数组
我没有使用过滤器进行变异，我使用 useState 作为过滤器应该返回一个过滤后的数组对吗？

标签： javascript node.js reactjs react-native react-redux

【解决方案1】：

问题是每次您创建一个新元素时，都会根据当前状态及时创建一个新的remove 函数。当您创建一个元素时，您会创建一个带有 remove 的 jsx，它指向特定于时间的 array 引用。

您可以解决这个问题，将您的 remove 函数更改为：

  const remove = (itemId) => {
    setArray(prevArr => prevArr.filter(each => each.id !== itemId))
  }

这将确保您始终拥有对当前状态的正确引用。

虽然这解决了问题，但我建议遵循指南，仅在您的状态下存储必要的信息，并在映射时将其传递给 JSX：

const App = () => {
  const [array, setArray] = useState([]);
  const remove = (itemId) => {
    setArray(array.filter(each => each.id !== itemId))
  }
  const addListComponent = () => {
    let id = uuidv4();
    setArray(oldArray => [...oldArray, { id }])
  }
  return (
    <div>
      <button onClick={addListComponent}>Add ListComponent</button>
      {array.length > 0 && array.map(({ id }) => <ListComponent key={id} id={id} remove={remove}/>)}
    </div>
  )
}

【讨论】：