时间戳

首页 > 解决方案 > 如何使用 map 函数动态响应 setState？

reactjs - 如何使用 map 函数动态响应 setState？

问题描述

我正在使用以下方法使用 map 动态更新状态。但是，这不起作用并且状态不会改变。为什么这种方法无效，应该有什么替代方法？

    values= ['test1', 'test2','test3'] // The array could contain anything 
    this.setState({
          events: [
            ...events,
            values.map((value) => {
              return {
                title: value,
                start: this.state.start,
                end: this.state.end,
              };
            }),
          ],
        });

标签： reactjsstate

解决方案

我可能是错的，但对我来说，您似乎只是在前面缺少一个扩展运算符values.map(...)

this.setState({
          events: [
            ...events,
            ...values.map((value) => {
              return {
                title: value,
                start: this.state.start,
                end: this.state.end,
              };
            }),
          ],
        });

因为values.map(...)返回一个数组，并且看到你 spread events，我猜你希望映射值也被传播。如果我对某些事情有误解，请告诉我，我们可以进一步调查。

此外，除非您events之前从状态中解构（在您未在此处粘贴的代码中），否则您可能希望将其称为this.state.events.

编辑：

关于为什么扩展运算符是解决方案的更详细解释：

在您state的属性events中是一个对象数组。因此，当您更改它的值时，它必须再次是一个对象数组。

也许最重要的细节是values.map 返回一个数组。

events是一个对象数组。对于values.map.

[events, values.map]一个包含两个数组的数组也是如此，一个在位置 0，另一个在位置 1。

但是你想要一个对象数组，而不是数组数组。因此，您必须同时传播它们。

我希望现在更清楚了。如果您还有其他问题，请随时提问。

推荐阅读