Question

我正在使用... spread语法替换react状态数组中的项。这有效：

let newImages = [...this.state.images]
newImages[4] = updatedImage
this.setState({images:newImages})

是否可以在一行代码中执行此操作？像这样的东西？（这显然不起作用......）

this.setState({images: [...this.state.images, [4]:updatedImage})

Answer 1

使用Array.slice

this.setState({images: [...this.state.images.slice(0, 3), updatedImage, ...this.state.images.slice(4)]})

Answer 2

没有语法提供，没有。 Object.assign完成工作：

this.setState({images: Object.assign([...this.state.images], {4: updatedImage}));

...但涉及一个临时对象（最后一个）。不过，只是一个临时对象...

它起作用是因为normal JS arrays aren't really arrays ¹，它们是具有一些特殊功能的对象。他们的＆＃34;索引＆＃34;实际上是属性名meeting certain criteria ²。因此，我们将this.state.images分散到一个新数组中，将其作为目标传递给Object.assign，并为Object.assign一个对象提供一个名为"4"的属性（是的，它最终成为一个字符串，但我们可以将其作为数字写入），并带有我们想要更新的值。

直播示例：

＆＃13;

const a = [0, 1, 2, 3, 4, 5, 6, 7];
const b = Object.assign([...a], {4: "four"});
console.log(b);

＆＃13;

如果4可以变量，那很好，您可以使用computed property name（ES2015中的新内容）：

let n = 4;
this.setState({images: Object.assign([...this.state.images], {[n]: updatedImage}));

请注意[]周围的n。

¹披露：这是我贫血的小博客上的帖子。

²它是项目符号列表后面的第二段：

整数索引是一个字符串值属性键，它是一个规范数字字符串（见7.1.16），其数值为 +0 或为正数整数≤2⁵³ -1。 数组索引是一个整数索引，其数值 i 的范围是+0≤ i ＆lt; 2 ³² -1。

这样Object.assign与create-the-array-then-update-index-4的功能相同。

Answer 3

您可以使用地图：

const newImages = this.state.images
  .map((image, index) => index === 4 ? updatedImage : image)

Answer 4

您可以将数组转换为对象（Multiple Comparison of Means - Tukey HSD,FWER=0.05 ============================================= group1 group2 meandiff lower upper reject --------------------------------------------- A B -3.9255 -5.5351 -2.3159 True A C -3.8763 -5.4859 -2.2667 True A D -3.2399 -4.8495 -1.6303 True B C 0.0492 -1.5604 1.6588 False B D 0.6856 -0.924 2.2952 False C D 0.6363 -0.9733 2.2459 False ---------------------------------------------），替换项（...array1），然后将其转换回数组（[1]:"seven"）：

Object.values

Answer 5

这是我的自我解释的一言不发

 const wantedIndex = 4;
 const oldArray = state.posts; // example

 const updated = {
     ...oldArray[wantedIndex], 
     read: !oldArray[wantedIndex].read // attributes to change...
 } 

 const before = oldArray.slice(0, wantedIndex); 
 const after = oldArray.slice(wantedIndex + 1);

 const menu = [
     ...before,  
     updated,
     ...after
 ]

Answer 6

我指的是@Bardia Rastin解决方案，发现该解决方案的索引值有误（它替换了索引3处的项，而不是索引4处的项）。

如果要替换具有索引值的项目，索引，答案应该为

this.setState({images: [...this.state.images.slice(0, index), updatedImage, ...this.state.images.slice(index + 1)]})

this.state.images.slice(0, index)是一个新数组，其项从开始，从0开始到索引-1 （不包括索引）

this.state.images.slice(index)是一个新数组，其项从 index开始，然后是。

要正确替换索引4的项目，答案应为

this.setState({images: [...this.state.images.slice(0, 4), updatedImage, ...this.state.images.slice(5)]})

在一行代码中用扩展语法替换数组条目？

6 个答案: