React 使用 if 语句过滤两个数组答案

【问题标题】：React filter two arrays with if statementReact 使用 if 语句过滤两个数组
【发布时间】：2019-03-07 20:42:17
【问题描述】：

我有这个数组：

items: [
  {
    _id: 1,
    name: honda,
    isOpened: false
  },
  {
    _id: 2,
    name: suzuki,
    isOpened: false
  },
  {
    _id: 3,
    name: audi,
    isOpened: false
  }
]

还有这个数组：

orders: [
  {
    _id: 123,
    user: Mark,
    ordersName: honda
  },
  {
    _id: 124,
    user: Angela,
    ordersName: honda
  },
  {
    _id: 125,
    user: Ana,
    ordersName: suzuki
  }
]

我正在使用此代码：

const dd = this.props.items.filter(({ name: name1, isOpened = isOpened }) =>
  this.props.ordersList.some(
    ({ ordersName: name2 }) => name1 === name2 || isOpened === true
  )
)

那工作正常。但是当数据库中没有特定项目的订单时，当我单击订单按钮时，没有显示带有项目数据的 div，它仅在我有订单时显示。当网站加载时，如果有一些订单，会显示一个包含项目和订单列表的 div，但是当我点击打开/显示项目时没有订单时它没有显示出来。

我在 const dd 上使用地图，如下所示：

<div>
  <div>
    {dd.map(response => {
      response.isOpened = true;
      return (
        <div className="panel" key={response._id}>
          <h1>{response.name}</h1>
          <div>
            {this.props.ordersList.map(res => {
              if (response.name == res.ordersName) {
                return (
                  <div>
                    <h3>{res.ordersName}</h3>
                  </div>
                );
              }
            })}
          </div>
        </div>
      );
    })}
  </div>
</div>

我不知道我解释得好不好。

【问题讨论】：

你好@Saban，我对React一无所知，但你写的代码不是javascript（我这么说是因为这些是你选择的标签）。我对其进行了调整，但我不确定您是否正在尝试实现此目标：jsfiddle.net/gal007/64jo3asr/11 您可以添加一个小提琴，以便我们可以更好地使用您的解决方案吗？（您可以将您正在使用的 React 版本添加到 jsfiddle）
我已经在使用该代码了。当我点击添加新订单时效果很好。但是在页面加载时，我需要过滤是否有订单，并且 isOpen 等于 true。
检查我在小提琴中写的代码。打开控制台，你会看到过滤后的订单
好的。假设您编写的这段代码很好。但是我现在如何过滤订单。我需要知道是否有商品订单，在页面加载时自动显示。这就是我需要的。
我已经用这段代码解决了我的问题： const dd1= this.props.items.filter(({name: name1}) => this.props.orders.some(({ordersName: name2 }) => name1 === name2)); dd1.map(itms=>{ itms.isOpened=true }) const dd=this.props.items.filter(itm=>{ return itm.isOpened==true })

标签： javascript reactjs

【解决方案1】：

如果要说餐厅是open 并且有some order，我认为这似乎更合乎逻辑，如果没有订单，您可以只显示类似There is no order 的消息

const items = [{
    _id: 1,
    name: "honda",
    isOpened: true
  },
  {
    _id: 2,
    name: "suzuki",
    isOpened: true
  },
  {
    _id: 3,
    name: "audi",
    isOpened: false
  }
]

const orders = [{
    _id: 123,
    user: "Mark",
    ordersName: "honda"
  },
  {
    _id: 124,
    user: "Angela",
    ordersName: "honda"
  },
  {
    _id: 125,
    user: "Ana",
    ordersName: "suzuki"
  }
]

const dd = items.filter(({
    name: name1,
    isOpened
  }) => {
    if (isOpened)
      return orders.filter(
        ({
          ordersName: name2
        }) => name1 === name2
      )
  }

)


console.log(dd)

【讨论】：

【解决方案2】：

我已经用这段代码解决了我的问题：

const dd1= this.props.items.filter(({name: name1}) => this.props.orders.some(({ordersName: name2}) => name1 === name2)); dd1.map(itms=>{ itms.isOpened=true }) const dd=this.props.items.filter(itm=>{ return itm.isOpened==true })

有没有什么方法可以用更少的行来编写代码？或者甚至在一行代码中？

【讨论】：