更新 State 数组中的一个值反应本机

Question

尝试更新 this.state 中数组的一个元素时出现（预期的，）错误，但看不出哪里出错了。我是否需要创建一个临时数组更新，然后将整个数组分配回状态

这基本上就是我所拥有的

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

onBack() {
  this.setState({
      array[2]: 'something' 
  });
}

Answer 1

使用Object.assign({});

let array= Object.assign({}, this.state.array); //creating copy of object

array[2]="something"

this.setState({array});

Answer 2

Manoj 的答案会奏效，还有另一种方法使用更新函数 (funtinal setState) for setState（您可以阅读 here)

onBack() {
  this.setState(prevState => {
    let newArray = prevState.array
    newArray[2] = "something"
    return { array: newArray }
  });
}

Answer 3

你不能像这样更新状态。

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

阅读React docs。

你可以这样做：

let newArray = [...this.state.array];
newArray[2] = 'somethingElse';
this.setState({array: newArray});

以上例子使用的是Spread Syntax.

有多种修改状态的方法，但所有方法都应确保数据被视为不可变的。您可以阅读更多关于在 React 中处理状态的信息 here

Answer 4

创建一个临时数组更新，然后将整个数组赋值回状态

var arr = [];
arr = this.state.array;
arr[2] = "something";
this.setState({
    array : arr
});

Answer 5

如果您不愿意使用扩展函数在 currentArray 上设置新的更新数组，您可以使用 Array.from(duplicateArray)

let duplicateArray = [...currentArray] //duplicate the array into new array
duplicateArray[index].value = 'x'; // update the field you want to update
setCurrentArray(Array.from(duplicateArray )) //set the new updated array into currentArray

我被这个问题困扰了，我只是搜索了一下，我看到了这个想法，而且它有效！ https://github.com/facebook/react-native/issues/21734#issuecomment-433885436

Answer 6

使用钩子

const [totalSet, setTotalSet] = useState(null);

console.log(总集); // {sets: Array(3), subscribeed: false}

setTotalSet(datas => ({
    ...datas,
    sets: updatedSet,
  }));

更新 State 数组中的一个值反应本机

updating one value in State array react native

arrays

reactjs

react-native

state

native

使用钩子