Question

尝试使用es6的map更新数组的状态，遇到了一些问题..这段代码出了什么问题？

this.setState({
  drinks: this.state.drinks.map(o => {
    if (o === this.state.newDrink) {
      return this.state.newDrink;
    }
    return o;
  })
});

饮料是一个阵列。我的添加功能很好，但不适用于更新，我认为上面有问题吗？

我的演示https://codesandbox.io/s/nk6qo8krvm

Answer 1

试试这个解决方案，它可能会有所帮助。

const drinks = this.state.drinks
drinks.map((data) => {
  if (data === this.state.newDrink){
    this.setState({drinks: this.state.newDrink})
  } else {
    this.setState({drinks: data})
  }
})

Answer 2

您正在将新饮料与旧饮料进行比较。

例如，如果您修改coffee并将其设为coffeef，则可以在地图函数coffee中与coffeef进行比较。所以它不会改变任何东西。

您应该保护旧值的引用，以便将其与之进行比较。

state = {
    drinks: ["coffee", "milo", "plain water"],
    modalIsOpen: false,
    newDrink: "",
    oldDrink: "" // <-- added
};

handleOpenModal = (isEdit, existingDrink) =>
    this.setState({
        modalIsOpen: true,
        newDrink: existingDrink,
        oldDrink: existingDrink, // <-- added
        isEdit
    });

this.setState({
    drinks: this.state.drinks.map(o => {
        console.log(o)
        console.log(this.state.newDrink)
        if (o === this.state.oldDrink) { // <-- changed
            return this.state.newDrink;
        }
        return o;
    }),
    modalIsOpen: false,
    newDrink: ""
});

工作示例：https://codesandbox.io/s/5k2y2l341k

警告

因为你比较饮料名称。如果你有2个相同名称的饮料，它会在你更换时更改这两个值。

修改

像@Tho Vu指出的那样。您可以使用索引而不是名称进行比较。这是一种更好的解决方案，它解决了上述问题。

https://codesandbox.io/s/w76978l6mw

Answer 3

问题基本上是你在地图上的比较。尝试并控制台记录您的地图功能，您可以看到数组永远不会更改。

如果返回newDrink值，if语句将检查列表中是否存在等于newDrink值的现有值。

显然，您的列表永远不会更新，因为newDrink值与现有值不同。

您的代码存在许多其他问题，但我已在您现有的代码段中解决了您的问题： https://codesandbox.io/s/10qpxx2nwj

此解决方案比映射整个列表略快，因为现在代码会解析您要更改的值的索引，如果您处于“编辑模式”，则只需更新列表中的值。

更新不响应setState

3 个答案: