如何设置状态来更新 React 中的数组？

Posted 2023-02-22

【中文标题】如何设置状态来更新 React 中的数组？

【英文标题】：How to setState to update an array in React?

【发布时间】：2018-11-18 16:23:57

【问题描述】：

我需要在 React 中更新我的组件状态的数组。 我已经看到了这个问题的几个主题，但到目前为止，他们都在使用扩展运算符向数组添加新项目，但我需要在回调中添加或删除项目，如下所示：

  handleCheck (newStatus, isChecked) 
    this.setState( filterStatus: [...this.state.filterStatus, newStatus] )
  

但这里的问题是它不适用于 isChecked 布尔值为 false 的状态以将它们从数组中删除

从该数组中添加或删除项目的最佳方法是什么，希望使用扩展运算符？

谢谢

【问题讨论】：

要访问先前的状态，请将函数传递给this.setState，以返回新状态，例如：this.setState(prevState => ( filterStatus: [...prevState.filterStatus, newStatus] ))。试试看，或许能解决你的问题。

我不确定您的问题是否清楚。当isChecked 为真时，需要从数组中移除“newStatus”吗？或者你需要返回一个只有 newStatus 的数组？

我需要根据 isChecked 布尔值添加或删除 newStatus 来更新数组。如果为真则添加iot，如果为假则删除它

数组是什么人？我认为您的问题不在数组中，而是在 cmets 中，记住对象是通过引用传递的，您需要删除 em，可能标准化您的数据会更好？但它就像一个数字数组，只需制作一个数组的新副本并放入状态

一个字符串数组...例如：['seven', 'four', 'six']

【参考方案1】：

尝试使用 .filter 删除元素。请记住在使用 .filter 之前复制数组（使用 [...array] 语法），不要更改原始数组：

handleCheck (newStatus, isChecked) 
    let newArray = isChecked? // if isChecked is true
        [...this.state.filterStatus, newStatus] : // add element
        [...this.state.filterStatus].filter(e => e !== newStatus); // remove the elements that are equal to newStatus
    this.setState( filterStatus: newArray)

【参考方案2】：

认为它很实用！

const prevArray = this.state.array;
const itemsToAdd = [item, item, item];

//this function map the prev array escaping elements to remove 
//and then push itemsToAdd to the new array
const updateArray = ( i = [0], newArray = [] ) => 
  i < prevArray ? 
    yourRemovingCondition(prevArray[i]) ? 
      updateArray( i + 1, newArray ) 
    : updateArray( i + 1, [...newArray, prevArray[i])
  : [...newArray, ...itemsToAdd]
;

setState(array: updateArray()];

【参考方案3】：

放检查，只有当布尔isChecked为真时才添加元素，否则使用filter从数组中删除元素。

像这样：

handleCheck (newStatus, isChecked) 
    this.setState(prevState =>  
        let filterStatus;
        if (isChecked) 
            filterStatus = [...prevState.filterStatus, newStatus];
         else 
            filterStatus = prevState.filterStatus.filter(el => el.id !== newStatus.id)
        
        return  filterStatus 
    )

注意：在过滤器回调方法中使用正确的唯一属性名称代替 id。