如何使用 setState 插入 React 的状态数组？答案

【问题标题】：How can I insert into React's state array with setState?如何使用 setState 插入 React 的状态数组？
【发布时间】：2017-02-17 21:34:11
【问题描述】：

我正在寻找在特定索引上修改和插入反应和插入元素的数组。这就是我的状态：

this.state = {arr: ['', '', '', '' ]}

我想做的是编译这个arr[index] = 'random element' 来响应js setState 语法。我试图做的是：

this.setState({ arr[index]: 'random element' })

但是失败了，你！

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

使用slice() 克隆当前状态。通过这样做，原始状态在setState() 之前保持不受影响。克隆后，对克隆的数组进行操作并将其设置为状态。上一个答案将改变状态。阅读此here

let a = this.state.arr.slice(); //creates the clone of the state
a[index] = "random element";
this.setState({arr: a});

【讨论】：

创建对象（包括数组）的深拷贝的另一种方法是使用扩展运算符，如下所示：let myElmClone = {...this.state.myElm};
只是在这里说，尽管在 Vue JS 中遇到过问题，但我偶然发现了 Stencil 中与状态更新相关的问题。这个评论帮助了我。谢谢！

【解决方案2】：

使用扩展运算符https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

let newChild = "newChild"

this.setState({
    children: [
        ...this.state.children,
        newChild
    ]
})

【讨论】：

【解决方案3】：

更新

只需按照建议的here 使用Object.assign() 来复制您的状态。

因此，您可以这样做：

let new_state = Object.assign({}, this.state); 
let a = new_state.arr;
a[index] = "random element";
this.setState({arr: a});

希望对你有帮助。

【讨论】：

哇，我应该更深入一点，这看起来如此简单和美好。同时我也找到了一种方法，但这绝对是最好的方法，ty！
这是一种不好的实现方式你不应该直接改变状态！
同意，let a = this.state.arr; 只是对同一个数组进行另一个引用，您不能直接对其进行变异。
a 是状态 arr 的引用。这将导致奇怪的行为，因为您正在第 3 行更改其状态。您应该在第 1 行创建数组的副本（不是它的引用）

【解决方案4】：

这样的事情会起作用。

状态数组

const [myArray, setMyArray] = useState<string[]>([])

添加到状态数组

function onChangeArray(newValue: string) {
    setMyArray(myArray => [...myArray, newValue)
}

【讨论】：

【解决方案5】：

两种方法：

使用连接：

注意：不允许使用数组推送方法，因为它会改变数组。它不会使数组保持完整，而是会更改它。相反，应该创建一个用于更新状态的新数组。

数组 concat 方法创建一个新数组，保持旧数组不变，但也从中返回一个新数组。

this.state = {
      value: '',
      list: ['a', 'b', 'c'],
    };

this.setState(state => {
const list = state.list.concat(state.value);
return {
        list,
        value: '',
      };
});

使用 ...展开运算符：

this.state = {
      value: '',
      list: ['a', 'b', 'c'],
    };

this.setState(state => {
const list = [...state.list, state.value]; <--insert in end -->``
const list = [state.value, ...state.list]; <--Or insert in start -->
return {
        list,
        value: '',
      };
});

参考：https://www.robinwieruch.de/react-state-array-add-update-remove/

【讨论】：

【解决方案6】：

Immer 是一种常见的依赖项来帮助处理这类事情。在这个例子中，你会做类似的事情

import {useImmer} from "use-immer"

export default function MyComponent(props) {
   const [state, setState] = useImmer({arr: ['', '', '', '' ]})

   // .... some time later

   setState(draft => {
       draft.arr[index] = newValue
   })
}

Immer 将负责确保您的状态得到不可变且正确的更新。

【讨论】：