文章/答案/技术大牛

发布

社区首页 >问答首页 >根据状态中另一项的内容设置状态

问根据状态中另一项的内容设置状态
EN

Stack Overflow用户

提问于 2020-05-26 12:01:59

回答 2查看 59关注 0票数 3

我正在尝试将order的setState设置为只有当它为true时才是catalog的内容，我猜我需要做一个函数，在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})
    })
  }

javascript

reactjs

回答 2

Stack Overflow用户

发布于 2020-05-26 12:11:18

将您的处理程序函数更改为如下所示。使用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。

EDIT 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
        ...
      },
        ...
    ]
...
}

EDIT 2:要适当地触发setOrder处理程序，请查看用于使用componentDidUpdate()监视状态变化的this article

票数 1

Stack Overflow用户

发布于 2020-05-26 12:25:46

这应该可以完成这项工作。

 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});

      }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62014472

复制

相似问题

问根据状态中另一项的内容设置状态
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据状态中另一项的内容设置状态EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据状态中另一项的内容设置状态
EN