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

Question

我的状态如下：

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;
}

Answer 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[=39=中做这样的事情]

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

请记住，reactjs.org 文档说：

Unlike the setState() method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

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

Answer 2

除了之外，您可以在一行中全部尝试（不需要spread、findIndex和splice）

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

Answer 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,
    });
  };

成功！！

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

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

How to remove a single object from Array Properties in React Js?

javascript

reactjs

react-material

解决方案：

重构代码：

注：