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

Question

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

3

我正在尝试将order的状态设置为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发生更改，则将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})
    })
  }

- Rezpo

1

为什么不选择其他尺寸？ item.size_m.isSelected - ABGR

@RahulDwivedi 实际上它应该适用于所有尺寸，抱歉我的错误... - Rezpo

你试图实现的目标是含糊不清的！你的意思是什么： “如果目录中第一项的size_m和第二项的size_l发生变化，则将isSelected更改为true”？ - Tarreq

2个回答

1

这应该能完成任务。

 setOrder = () => {
    const { catalog } = this.state


     var catalogOrder = [];
        catalog.forEach(i=>{
          if(i.size_m.isSelected){
             catalogOrder.push(i.size_m);
           }else if(i.size_xl.isSelected ){
             catalogOrder.push(i.size_s);
           }else if(i.size_l.isSelected){
             catalogOrder.push(i.size_l);
            }
        });
        this.setState({order: catalogOrder});

      }

- ABGR

请问您为什么要使用 push 和 map？ - schoinh

map 用于遍历 catalog 中的项。push 用于将所需项推入数组。如果您不想使用 push，也可以这样做：catalogOrder = [...catalogOrder, ...i]。 - ABGR

这样做是可行的，但我认为使用 forEach 会更少冗余，因为您不需要 map 函数来创建一个新数组。我也喜欢您的扩展运算符选项。 - schoinh

1

是的，我同意 forEach 部分。由于我们不创建新数组，因此可以用 forEach 替换 map。 - ABGR

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- schoinh · Accepted Answer

将您的处理函数更改为以下内容。使用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处理程序，请查看this article，以便使用componentDidUpdate()监视状态更改。