javascript - 如何使用带有 setState 的数组？

Question

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

用数组设置状态:(不设置状态)

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

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

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

逐行(这有效并且可以设置状态):

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

Answer 1

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

对于 localStorage.getItem()，第一个参数是字符串键名。您不能通过使用数组作为键一次获取多个键。

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

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

解释:

我们正在减少一个数组，这听起来像它的作用。它将数组中的所有项目减少为一件事。第一个参数 memo 是“累加器”，意思是我们正在减少和构建的东西，第二个参数是当前元素('message'、“照片” 等)。

具有这种语法的箭头函数 () => ({}) 表示返回一个对象。特别是包裹花括号的括号。如果没有圆括号包裹，如 () => {} 中那样，则花括号内的任何内容都将被解释为常规函数体。

此语法:

{ ...memo }

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

最后，要根据变量名设置键，将其包装在[]中，如

{ [ key ]: ... }

因此，如果键是 'message'，它将创建一个带有 { message: ... } 的对象

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

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

然后将其传递给 setState，以便正确设置所有键。

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

[].forEach() 适用于不返回任何东西但有副作用(比如推送到某个更高范围的数组)的循环。但在这种情况下，两者都不理想，.reduce() 在语义上更正确，可以生成基于数组的对象。