如何从 React Js 中的数组属性中删除单个对象？

Posted 2023-02-22

【中文标题】如何从 React Js 中的数组属性中删除单个对象？

【英文标题】：How to remove a single object from Array Properties in React Js?

【发布时间】：2021-07-01 03:30:19

【问题描述】：

我的状态如下：

const initialFieldValue=
...............

photos:[]
.........



const [state, setState] = useState(initialFieldValue);

然后我通过onClick这样的函数一一推送一些对象：

const handlePush=()=>
     state.photos.push(
        fieldId: Math.random(), 
        file: file , /// from upload file
      );
    

现在我想像

这样的 onClick 函数一一删除这些对象

const handleRemove=(fieldId )=>
    const tableDoc = [...state.photos];
    tableDoc.splice(
      tableDoc.findIndex(value => value.fieldId === fieldId),
      1,
    );
    state.photos = tableDoc;

【问题讨论】：

这里没有任何反应

【参考方案1】：

解决方案：

改变这一行

state.photos = tableDoc;

到

setState(...state, photos: tableDoc);

---

重构代码：

const newPhotos = state.photos.filter(value => value.fieldId !== fieldId);
setState(prevState => (...prevState, photos: ...newPhotos ));

---

注意：

Don't mutate data in React Js: 同handleRemove方法，你不应该直接改变数据，请在handlePush中做这样的事情

const newPhoto = fieldId: Math.random(),file: file;
setState(prevState => (...prevState, photos: [...prevState.photos, newPhoto]));

请记住，来自 reactjs.org 的文档说：

不像setState() method found in class components, useState 确实 不会自动合并更新对象。你可以复制 这个 通过将函数更新器形式与对象传播相结合的行为 语法：

setState(prevState => 
  // Object.assign would also work
  return ...prevState, ...updatedValues;
);

【参考方案2】：

除了above solution之外，你可以在一行中尝试所有（不需要spread、findIndex和splice）

setState(...state, photos: state.photos.filter(value => value.fieldId !== fieldId));

【参考方案3】：

感谢大家尝试为我解决问题。每个人都是对的。但我可以这样修改：

//Old
const handlePush=()=>
     state.photos.push(
        fieldId: Math.random(), 
        file: file , /// from upload file
      );
    


//New

handleChange =()=>
setState(
      ...state,
      photos: [...state.photos,  
        fieldId: Math.random(), 
        file: file , /// from upload file 
      ],
    );

然后删除函数：

//old
const handleRemove=(fieldId )=>
    const tableDoc = [...state.photos];
    tableDoc.splice(
      tableDoc.findIndex(value => value.fieldId === fieldId),
      1,
    );
    state.photos = tableDoc;

//New
  const handlePhotoRemove = fieldId => 
    const tabPhotos = [...state.photos];
    tabPhotos.splice(
      tabPhotos.findIndex(value => value.fieldId === fieldId ),
      1,
    );
    setState(
      ...state,
      photos: tabPhotos,
    );
  ;

成功了！！

谢谢。请告诉我是否有任何简单的解决方案