Question

我在状态中有一个数组。我正在创建一种添加新行的方法，但是如何为setState中的数组分配动态ID？

这是我的状态：-

myArray: [
 { id:0, title:'Hello', function: 'none' }
    ]

我有一个方法addRow，它创建新的数组。

addRow = () => {
const rows = [...this.state.myArray, {id: '' ,value:'',options: []}];
this.setState({
   myArray: rows
 });
}

如何创建该方法的新动态ID onClick？

Answer 1

最简单的方法是使用当前数组的长度。

addRow = () => {
  const rows = [...this.state.myArray, {id: this.state.myArray.length ,value:'',options: []}];
  this.setState({
    myArray: rows
  });
}

Answer 2

您可以采用2种方法：

添加一个计数器变量this.setState({ count: this.state.count + 1 })并在每次onClick时将其递增。

OR

使用UUID import uuid from 'uuid'之类的东西，它将生成一个唯一的ID供您使用。

Answer 3

在没有功能setState的情况下您可能会遇到asyc问题，因此您可以执行以下操作：

addRow = () => {
  this.setState(previousState => {
    const { myArray } = previousState
    return { ...previousState, myArray: [ ...myArray, { id: myArray.length } ] }
  });
}

以供参考：https://reactjs.org/docs/faq-state.html#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate

反应在setState中分配动态ID？

3 个答案: