更新不適用於反應中的setState

Question

嘗試使用es6的映射更新數組的狀態，出現了一些問題。此代碼有什么問題？

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可以在地圖功能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

問題基本上是您在地圖中的比較。 嘗試並控制台記錄您的地圖函數，您會看到數組永不更改。

if語句檢查列表中是否有等於newDrink值的現有值，如果存在則返回newDrink值。

顯然，您的列表將永遠不會更新，因為newDrink值與現有值不同。

您的代碼還有很多其他問題，但是我已經在您現有的代碼段中解決了您的問題： https : //codesandbox.io/s/10qpxx2nwj

該解決方案比映射整個列表要快一些，因為現在代碼將解析要更改的值的索引，並且如果您處於“編輯模式”，則只需更新列表中的值即可。