如何将数组与 setState 一起使用？

我目前正在使用以下命令将数组映射到 setState，但没有设置任何内容，也没有记录任何错误。如果我明确地逐行写出它，它就会起作用。关于如何解决这个问题有什么想法或建议吗？

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

const myData = ['message', 'photo', 'isLoggedInhoto'];
const newData = [];

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

this.setState({
  newData: localStorage.getItem(newData),
})

逐行（这有效并执行 setState）：

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

不幸的是，Javascript 不会按照代码假设的方式解构数组。您无法将数组设置为对象的键并将其扩展到数组中的所有项目。您的代码只是设置一个名为newData，不设置键数组。对象字面量中的 Javascript 键不必加引号。这是使用字符串“newData”，而不是变量。

For localStorage.getItem()，第一个参数是字符串键名。使用数组作为键无法一次获取多个键。

这是一种简洁的方法，使用 ES6 语法：

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

解释：

We're reducing一个数组，听起来就像它的作用。它将数组中的所有项目减少为一件事。第一个论点memo是“累加器”，意味着我们正在减少和构建的东西，第二项是当前元素（'message', 'photo', etc).

具有此语法的箭头函数() => ({})意思是返回一个对象。特别是包裹大括号的括号。没有括号包裹，如() => {}，那么大括号内的任何内容都被解释为常规函数体。

这个语法：

{ ...memo }

表示复制旧对象的内容memo到一个新的对象中。这是 es6 扩展运算符。

最后，要根据变量名称设置键，请将其包装在[], as in

{ [ key ]: ... }

所以如果关键是'message'，它将创建一个对象{ message: ... }

整个代码将产生一个像这样的对象

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

然后传递给setState所以所有的键都设置正确。

此外，.map()一般情况下不应以这种方式使用。.map()旨在用于返回一个新数组，其中旧值映射到一些新值。丢弃来自的返回.map()意味着您使用了错误的循环范例。

[].forEach()适用于不返回任何内容而是具有副作用的循环（例如推送到一些更高范围的数组）。但在这种情况下，两者都不理想，.reduce()基于数组生成对象在语义上更正确。