更新状态数组中的一个值反应原生

Posted 2023-02-22

【中文标题】更新状态数组中的一个值反应原生

【英文标题】：updating one value in State array react native

【发布时间】：2018-11-09 05:33:05

【问题描述】：

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

这基本上就是我所拥有的

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

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

【问题讨论】：

Do I need to create a temporary array update that, then assign the whole array back to the state是

@DragoşPaulMarinescu 是正确的，这种方法是最好的方法！

【参考方案1】：

你不能这样更新状态。

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。

阅读React docs。

你可以这样做：

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

上面的例子是使用Spread Syntax。

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

【讨论】：

赞成传播运算符方法，也只是为了获得额外的知识，这对于状态的直接突变或使用传播运算符会更好？

直接变异会更快，因为您不必创建副本，但这会导致状态不一致，并且永远不应该这样做。扩展运算符基本上创建了原始数组的副本。

【参考方案2】：

Manoj 的回答会起作用，还有另一种方法使用更新程序函数 (funtinal setState) 为 setState（您可以阅读有关 here 的信息）

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

【参考方案3】：

使用Object.assign();

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

array[2]="something"

this.setState(array);

【参考方案4】：

如果您不想使用扩展函数在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

【参考方案5】：

使用钩子

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

console.log(totalSet); // sets: Array(3), subscribed: false

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

【参考方案6】：

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

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

【讨论】：

这是错误的，因为它直接改变了状态。 arr = this.state.array 的行为与您的预期不同。

我已经尝试过使用我自己的演示项目，并且它可以按照 OP 的要求正常工作。

因为这是根本错误的，不应该是公认的答案。 arr = this.state.array 不会创建新数组，而是创建对 state.array 的引用。在您执行arr[2] = "something" 之后尝试控制台记录this.state.array，看看会发生什么。

您显然不了解不变性以及我要解释的内容，所以我要停下来。

对此感到抱歉，感谢您澄清了不可变状态的概念，我google了它并试图理解。