如何使用setState插入数组，反应js

Question

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

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

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

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

但是失败了，ty！

Answer 1

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

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

Answer 2

<强>更新

只需按照建议Object.assign()使用here即可复制您的州。

因此，您可以按照以下方式执行此操作：

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

希望它有所帮助。

Answer 3

这样的事情会起作用。

状态数组

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

添加到状态数组

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

Answer 4

使用传播算子https://codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754

let newChild = "newChild"

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

Answer 5

两种方法：

1. 使用concat ：

注意：不允许使用 array push方法，因为它会改变数组。它不会使数组完整无缺，但会对其进行更改。相反，应该创建一个用于更新状态的新数组。

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

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

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

1. 使用...扩展运算符：

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/

Answer 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会确保您的状态一成不变且正确地更新。