typescript React嵌套循环查询

vhmi4jdf  于 2023-01-31  发布在  TypeScript
关注(0)|答案(2)|浏览(144)

我是React的新手,正在努力解决一些使用XML/XPath非常简单的问题。
我有两个数组对象,为了简单起见,我去掉了大部分要演示的属性,只将所有内容设置为字符串...

customerList: Customer[]

export class Customer {
  id: string = "";
  firstname: string = "";
}

然后是第二个数组对象:

orderList: Order[]

export class Order {
  id: string = "";
  customerid: string = "";
}

假设order.customerid可以为空。
我要做的是遍历每个客户,检查是否有客户没有订单。
我尝试过的:

{customers.map((customer) => {
    return(
        orders.map((order) => {
           if(order.customerid == customer.id)

           {
               order.customerid == customer.id ? <p>customer has order</p> : <p>customer does not have order</p>
           }

        })
    )
)}

我想我应该设置一些布尔标记来指示是否有客户没有订单,但我只是想得到一些功能。

3zwtqj6y

3zwtqj6y1#

使用map函数时,将根据每个循环中返回的内容创建一个新数组。
即:

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((i) => i*i);
console.log(newArr)

//Output: [1, 4, 9, 16, 25]

在您的例子中,由于您没有定义返回什么,它将只返回undefined,因此您将得到一个未定义值的嵌套数组。
为了实现所需的功能,我会执行以下操作

const newArr = customerList.map((customer) => {
    return {
        ...customer, 
        customerOrdered: orders.find(order => order.customerid === customer.id)
    }
})

它将创建一个新的客户数组,指示客户是否已下订单

lnxxn5zx

lnxxn5zx2#

你没有在问题中提到,但我假设你想呈现客户屏幕,这个客户没有任何订单。所以你必须返回它。这是人们开始使用React时的常见错误。但看起来像你使用typescript和使用它的错误方式。你不必创建一个类。创建一个类型或接口代替。有很多方法来存档你想做的事情,这只是其中之一,你不需要创建新的数组或者改变状态格式。

interface Customer {
  id: string,
  name: string,
}
interface Order {
  id: string,
  customerId: string
}

// Pretend that you pass customer and orders to this component
function Component({customers, orders}) {
  return (
    {customers.map((customer) => {
      let haveOrder = false;
      orders.forEach((order) => {
        if(order.customerid == customer.id){
          haveOrder = true; 
        }
      });
      if (haveOrder){
        return(
           <p>customer has order</p> 
        )
      }else {
        return(
          <p>customer does not have order</p>
        )
      }
    )}
  )

相关问题