Question

以下是我的状态对象

const state = {
  campaign: [{
    id: 1,
    products: [{
        id: 11,
        isWishlist: true
      },
      {
        id: 12,
        isWishlist: true
      },
    ]
  },
            {
    id: 2,
    products: [{
        id: 13,
        isWishlist: true
      },
      {
        id: 14,
        isWishlist: true
      },
    ]
  }]
}

现在在UI中，有一个动作可以使isWishlist属性发生变化。为了让应用程序重新呈现，我应该如何更新状态，即

  updateCampaignProdList = (payload) => {
    const filteredProdColl = []
    this.state.campaignList.map(campaign => {
      filteredProdColl.push(campaign.products.filter(product => product.id === payload.id))
    })
    const prodClicked = filteredProdColl[0][0]
    this.setState({
      campaignList: this.state.campaignList.map(campaign => {
        campaign.products.map(product => {
          if (product.id !== prodClicked.id) {
            return product
          } else {
            return Object.assign({}, product, {
              isWishlist: !(product.isWishlist)
            })
          }
        })
        return Object.assign({}, campaign, {
          products: campaign.products
        })
      })
    })
  }

这是状态应该如何更新，我也会收到flattenChildren(...): Encountered two children with the same key,警告。

上面的

payload是来自api的响应，其中产品的ID已更改，

更新

感谢@Panther指导，下面是我的完整代码

updateCampaignProdList = (payload) => {
    const filteredProdColl = []

    this.state.campaignList.map(campaign => {
      const prodArr = campaign.products.filter(product => product.id === payload.id)
      if (prodArr.length !== 0) {
        filteredProdColl.push(prodArr)
      }
    })

    const prodClicked = filteredProdColl[0][0]

    let newCampaignList = [].concat(this.state.campaignList.map(campaign => {
      let newCampaign = {
        ...campaign,
        products: campaign.products.map(product => {
          if (product.id === prodClicked.id) {
            let newProduct = {
              ...product,
              is_wishlist: !product.is_wishlist
            }
            return newProduct
          }
          return product
        })
  }
  return newCampaign
}))

this.setState({
  campaignList: newCampaignList
})

}

Answer 1

您的更新方式还可以，但包含太多复杂性。像下面那样简化它

updateCampaignProdList = (payload) => {
 const filteredProdColl = this.state.campaignList.map(campaign => {
   return campaign.products.filter(product => product.id === payload.id)
 })
 const prodClicked = filteredProdColl[0][0]
 let newCampaignList = [].concat(this.state.campaignList.map(campaign => {
    return campaign.products.map(product => {
      if (product.id === prodClicked.id) {
        let newProduct = {
           ...product,
           isWishlist: !product.isWishlist
        }
        return newProduct;
      }
      return product
    })
  })

 this.setState({
  campaignList: newCampaignList
 })
}

Encountered two children with the same key的原因是当你在渲染中创建一个循环（可能是产品图）时，你应该将key属性赋给返回的JSX的根。可以从here

中读取更多内容

在reactjs中更新状态

更新

1 个答案: