javascript - 如何将道具下拉到组件中？

问题描述

我正在创建一个简单的应用程序，它通过映射工作订单（第一个 API）来创建“卡片”。通过此 API，workersId需要从第二个 API 获取工作人员数据。

这是我的 App.js


  class App extends React.Component{
  constructor(props){
      super(props);

      this.state = {
          orders:[],
          workersData: []
      };
  }

  componentDidMount(){
    fetch('https://www.hatchways.io/api/assessment/work_orders')
      .then(res=> res.json())
      .then(({ orders }) => {
        this.setState({
          orders: orders
        }, () => {
          this.state.orders.map(order => {
            fetch(`https://www.hatchways.io/api/assessment/workers/${order.workerId}`)
              .then(response=> response.json())
              .then(workersData => {
                this.setState({
                  workersData: workersData
                })
              })
          })
        });
      })
      .catch(err => {
        console.log(err)
      });
  }

  render(){
    const { orders, workersData } = this.state;
      return(
       <CardList orders={ orders } workersData={ workersData } />
      );
  }
}

export default App;

我将 'orders' 和 'workersData' 道具携带到我的 'CardList' 组件中，以便我可以尝试映射每条数据并将其放置在单独的卡片中。

const CardList = props => {
    console.log(props) //<-- this contains the 'orders' and 'workersData'

    const workOrderJsx = props.orders.map( order => (
        <Col key={ order.id } md={6} >
            <Card order={order} />
        </Col>
    ))

    return (
        <ListGroup>
            <MDBContainer fluid={true} >
                <MDBRow>
                    {workOrderJsx}
                </MDBRow>
            </MDBContainer>
        </ListGroup>
    );
}

export default CardList;

这一切都很好，但我面临的问题是，通过映射订单，我只能得到带有订单的卡片。我怎样才能同时检索对应id于orders对象中的工人信息？

const Card = props => {
    console.log(props) //<-- only order data

    let date = new Date( props.order.deadline * 1000 );
    const newTime = date.toLocaleString()

    return (
        <div className="card-container">
            <h1 className="order-name">{props.order.name}</h1>
            <p className="ml-5 mr-4">{props.order.description}</p>
            <div>
                <h5> Worker: {props.order.workerId} </h5> //<-- this is where I need the workers info to go
            </div>
            <p className="date">{newTime}</p>
        </div>
    )
}

export default Card;

标签： javascriptreactjsapimappingreact-props

首先，您为每个订单获取 workerData 的多个请求总是被新的响应覆盖，这意味着您的 workerData 将仅包含最后一个订单的数据。所以你应该在那里使用 Object ，每个 workerData 都将被放置在每个订单上。结构应该像{ [orderWorkerId]: fetchedWorkerData}

然后在您的 map 方法中，您可以根据 order.workerId 获取指定的 workerData 并将其传递给您将获得每个订单的正确数据的组件。希望这可以帮助：）

更多详细信息：

在获取workerData的API调用中，这样做：

this.setState({workersData: { ...this.state.workersData, [order.workerId]: workersData }

通过这种方式，您可以针对 order.workerId 维护所有 workerData。之后，在您的订单地图方法中执行以下操作：

<Card order={order} workerData={props.workersData[order.workerId]} />

通过这种方式，您将在 Card 组件中获得与您的订单相关的 workerData，您可以根据需要使用它。:)

javascript - 如何将道具下拉到组件中？

问题描述

解决方案

推荐阅读