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

Question

我试图将 order 的 setState 设置为 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: []
  }
}

示例:如果 catalog 中第一项的 size_m 和第二项的 size_l 将 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})
    })
  }

Answer 1

将您的处理程序函数更改为类似这样的内容。使用 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——而我不认为这就是你想在这里做的。 Read more about map in MDN .

编辑 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 处理程序，请查看 this article使用 componentDidUpdate()

观察状态变化