Javascript 如何插入React'；s状态数组与setState？

我希望在react中修改和数组，并在特定索引中插入元素。这就是我的状态：

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

我想做的是编译这个

arr[index]='random element'

来响应js setState语法。我想做的是：

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

---

但是失败了，泰

更新

只需按建议使用，复制您的状态

因此，您可以按如下方式执行：

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

希望能有所帮助。

使用

slice（）

克隆当前状态。这样，原始状态将保持不变，直到

setState（）

。克隆后，对克隆的阵列执行操作并将其设置为状态。前面的答案将改变状态。读一下这个

使用扩展运算符

---

两种方法：

使用concat：

注意：不允许使用数组推送方法，因为它会变异数组。它不会使数组保持不变，但会对其进行更改。相反，应该创建一个用于更新状态的新数组

Array concat方法创建一个新数组，保留旧数组的完整性，但也从中返回一个新数组

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

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

使用…扩展运算符：

this.state={
值：“”，
列表：['a'，'b'，'c']，
};
this.setState（state=>{
const list=[…state.list，state.value]``
常量列表=[state.value，…state.list]；
返回{
列表
值：“”，
};
});

---

Reference：

Immer是帮助解决此类问题的常见依赖项。在本例中，您将执行以下操作

从“使用immer”导入{useImmer}
导出默认函数MyComponent（道具）{
const[state，setState]=useImmer（{arr:[''，''，''，''，']}）
//……过了一段时间
设置状态（草稿=>{
draft.arr[index]=新值
})
}

---

Immer将负责确保您的状态得到永久和正确的更新。

类似的操作将起作用

状态数组

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

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

---

哇，我应该更深入一点，看起来很简单也很好。与此同时，我也找到了一种方法，但这绝对是最好的方法，泰！这是一种糟糕的实现方式，你不应该直接改变状态！同意，

让a=this.state.arr

只是对同一数组进行另一个引用，不能直接进行变异。a是状态arr的引用。这将导致奇怪的行为，因为您正在第3行更改其状态。您应该在第1行创建数组的副本（不是它的引用）。创建对象（包括数组）的深度副本的另一种方法是使用扩展运算符，如下所示：

let myElmClone={…this.state.myElm}这里只是想说，尽管在Vue JS中遇到了一个问题，我还是在模具中偶然发现了与状态更新相关的问题。这句话对我很有帮助。谢谢
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: '',
      };
});

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

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