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

【问题标题】：How to remove a single object from Array Properties in React Js?如何从 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;
}

【问题讨论】：

这里没有任何反应

标签： javascript reactjs react-material

【解决方案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,
    });
  };

成功了！！

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

【讨论】：