Javascript 如何使用带有setState的数组？

我目前正在使用以下命令将我的数组映射到setState，但是没有设置任何内容，也没有记录任何错误。如果我把它一行一行地写出来，它就行了。对如何进行这项工作有什么想法或建议吗

使用数组设置状态：（不设置状态）

逐行（此操作有效且不设置状态）：

this.setState({
  message: localStorage.getItem('message'),
  photo: localStorage.getItem('photo'),
  isLoggedIn: localStorage.getItem('isLoggedIn')
})

const myData = ['message', 'photo', 'isLoggedInhoto'];
const state = Object.assign({}, ...myData.map((prop) => ({
  [prop]: localStorage.getItem(prop) // or JSON.parse(localStorage.getItem(prop)) if your storing a JSON
})));

this.setState(state);

---

不能将数组用作对象的键和

getItem

的参数

您需要循环查看

newData

，并使用以下语法：

或者在重构代码时，您可以通过单个循环和单个

setState

调用来实现：

const myData = ['message', 'photo', 'isLoggedInhoto']
const newData = {}

{[...Array(myData.length)].map((x, index) =>
  newData[myData[index]] = localStorage.getItem(myData[index])
)}

 this.setState(newData)

---

不幸的是，Javascript没有像代码假定的那样解构数组。不能将数组设置为对象的键，并将其扩展到数组中的所有项。您的代码只是设置一个名为

newData

的键，而不是设置一个键数组。对象文本中的Javascript键不必被引用。这是使用字符串“newData”，而不是变量

对于

localStorage.getItem（）

，第一个参数是字符串键名。使用数组作为键不能同时获取多个键

这是一种干净的方法，使用ES6语法：

this.setState(
    [ 'message', 'photo', 'isLoggedInhoto' ].reduce( ( memo, key ) => ({
        ...memo,
        [ key ]: localStorage.getItem( key )
    }), {} )
);

说明：

我们正在减少一个数组，这听起来像它所做的。它将数组中的所有项缩减为一项。第一个参数

memo

是“累加器”，意思是我们在前进的过程中要减少并建立的东西，第二个参数是当前元素（

'message'

，

'photo'

，等等）

语法为

（）=>（{}）

的箭头函数表示返回一个对象。特别是括号，它包裹着花括号。如果没有括号，如

（）=>{}

中所示，则大括号内的任何内容都将被解释为常规函数体

此语法：

{ ...memo }

表示将旧对象的内容复制到新对象中。这是es6排列运算符

最后，要根据变量名设置键，请将其包装在

[]

中，如中所示

{ [ key ]: ... }

所以，如果键是

'message

，它将创建一个具有

{message:…}

整个代码将生成一个类似

{
    message: localStorage.getItem('message'),
    photo: localStorage.getItem('photo'),
    isLoggedIn: localStorage.getItem('isLoggedIn')
}

然后将其传递到

setState

，以便正确设置所有键

此外，

.map（）

通常不应以这种方式使用

.map（）

用于返回一个新数组，其中旧值映射到一些新值。放弃

.map（）

的返回意味着您使用了错误的循环范例

---

[].forEach（）

适用于不返回任何内容而具有副作用的循环（例如推到更高范围的数组）。但在这种情况下，两者都不理想，

.reduce（）

在语义上更正确，可以基于数组生成对象。

您试图创建一个新的状态对象，其中包含列表中的属性，并使用列表作为键从

localStorage

提取数据

使用

在每次迭代中，使用列表中的一个键创建一个新对象，然后 从

localStorage

获取数据。别忘了如果 您已经存储了一个字符串化的JSON数据

使用创建数组并创建新对象

将结果对象设置为您的状态

代码：

this.setState({
  message: localStorage.getItem('message'),
  photo: localStorage.getItem('photo'),
  isLoggedIn: localStorage.getItem('isLoggedIn')
})

const myData = ['message', 'photo', 'isLoggedInhoto'];
const state = Object.assign({}, ...myData.map((prop) => ({
  [prop]: localStorage.getItem(prop) // or JSON.parse(localStorage.getItem(prop)) if your storing a JSON
})));

this.setState(state);

---

这里有很多问题

getItem

接受字符串，而不是对象。您还没有将新数据设置到本地存储中。还有，你想完成什么？您可以在es6I中使用myData.slice（）或[…myData]克隆阵列。您的目标是使用基于名称的localstorage中的项目数组来设置状态。构造函数中正在设置数据……问题，是的。因此，他们两人都提出了这个问题。我选择了--constmydata=['message'，'photo'，'isLoggedIn']；myData.forEach（key=>this.setState（{[key]：localStorage.getItem（key）}）--工作正常，谢谢GG！！谢谢，安迪，那也行！！在react和es6中只有一周…：）这个答案在语义上更加正确，并且不会多次调用setState。越短越好；）谢谢Ori，但是得到了这个控制台错误。“位置0（…）处的JSON中出现意外的令牌W”您没有存储非JSON数据，因此

JSON.parse（）

无法解析。删除

JSON.parse（）

，它就会工作。我在答案中选择了

JSON.parse（）

。检查

JSON.stringify（）

和

JSON.parse（）

做什么。在localStorage中存储对象和数组，或者使用AJAX调用发送它们，都需要它们。