反应从数组 state 中删除项目不会重新渲染

Question

我需要从我的数组 state 中删除一个项目，但它不能按我需要的方式工作。 我从服务器的 details obj 中获取 state 并将其保存为name 。 它是一个对象数组。

const [name, setName] = useState(
    [...details?.name] || []
);

我的添加 function 根据需要工作：

const addName = () => {
    nameForm.validateFields().then(values => {
      setName([...name, values]);
      nameForm.resetFields();
      setModalVisible(false);
    });
 };

删除 function 但是没有。 我第一次调用 function 但每次我再次调用 function 时，它使用名称 state 的初始声明。 例如，如果数组大小为 4，则第一次调用将删除一个元素，它的大小为 3。如果我再次调用该 function，则名称仍为大小 4。

const removeName = (obj) => {
    setName([...name.filter(i => i !== obj)]);
};

Answer 1

您不能使用!==运算符比较对象。 相反，您需要比较 object 的一些属性。 您没有说您的 object 具有哪些属性，但让我们假设它们具有 id 属性：

setName([...name.filter(i => i.id !== obj.id)]);

会工作。