时间戳

首页 > 解决方案 > 从状态中另一个项目的内容设置状态

javascript - 从状态中另一个项目的内容设置状态

问题描述

我试图将 setState oforder设置为catalog仅当它的内容时true，我想我需要创建一个函数，如果状态发生order变化，则始终监听。

这是我的状态

constructor(props) {
  super(props)
  this.state = {
    catalog: [
      {
        photo: 'https://via.placeholder.com/164x168',
        title: 'FirstItem',
        description: 'Fugiat nulla incididunt laborum et esse adipisicing esse aliquip.',
        size_m: { size: 'M', price: 5000, id: 'FTM', selectedIndicator: '', isSelected: false },
        size_l: { size: 'L', price: 8000, id: 'FTL', selectedIndicator: '', isSelected: false },
        size_xl: { size: 'XL', price: 10000, id: 'FTXL', selectedIndicator: '', isSelected: false },
      },
      {
        photo: 'https://via.placeholder.com/164x168',
        title: 'SecondItem',
        description: 'Fugiat nulla incididunt laborum et esse adipisicing esse aliquip.',
        size_m: { size: 'M', price: 5000, id: 'SCRM', selectedIndicator: '', isSelected: false },
        size_l: { size: 'L', price: 8000, id: 'SCRL', selectedIndicator: '', isSelected: false },
        size_xl: { size: 'XL', price: 10000, id: 'SCXL', selectedIndicator: '', isSelected: false },
      },
    ],
    order: []
  }
}

示例：如果size_m第一项和size_l第二项catalog更改isSelected为true，order则状态应更新为

order: [
  {
    size_m: { size: 'M', price: 5000, id: 'FTM', selectedIndicator: '', isSelected: true },
    size_l: { size: 'L', price: 8000, id: 'SCRL', selectedIndicator: '', isSelected: true }
  }
]

这是我的处理函数

  setOrder = () => {
    const { catalog } = this.state
    let catalogOrder = []
    catalog.map(item => {
      if(item.size_m.isSelected) {
        catalogOrder = [item]
      }
      return this.setState({order: catalogOrder})
    })
  }

标签： javascriptreactjs

解决方案

将您的处理程序函数更改为这样的东西。使用forEach代替map，将setState调用从回调中取出，并return从最后一行删除：

setOrder = () => {
  const { catalog } = this.state
  let catalogOrder = []
  catalog.forEach(item => {
    if(item.size_m.isSelected) {
      catalogOrder.push(item)
    }
  })
  this.setState({order: catalogOrder})
}

该map方法将原始数组中元素的修改映射到一个新数组上——例如，你想将数组中的每个数字乘以 3——我认为这不是你想要做的。在 MDN 中阅读更多信息map。

编辑 1：以上内容并不能完全解决您的问题，因为您的代码目前只检查中等大小。我认为实现您想要做的事情的一种方法是在每个catalog项目下创建一个新属性，以跟踪所选大小，例如：

this.state = {
    catalog: [
      {
        photo: 'https://via.placeholder.com/164x168',
        title: 'FirstItem',
        description: 'Fugiat nulla incididunt laborum et esse adipisicing esse aliquip.',
        selectedSize: '',   // this can hold whatever object or reference you need
        ...
      },
        ...
    ]
...
}

编辑 2：要适当地触发setOrder处理程序，请查看这篇文章以观察状态的变化componentDidUpdate()

推荐阅读