在 React JS 中调用子 API

Question

我正在尝试调用 API 并在 React js 中显示 table 上的数据。 API 结构如下：

     "items" : [ { 
        "@id" : "http://ABCD......" ,
        "dateTime" : "2022-05-28T00:00:00Z" ,
        "measure" : "http://measurement_1/abc" ,
        "value" : 0.066
      }
      , { 
        "@id" : "http://ABCD......" ,
        "dateTime" : "2022-05-28T00:15:00Z" ,
        "measure" : "http://measurement_2/abc" ,
        "value" : 0.066
      }
      , { 
        "@id" : "http://ABCD......" ,
        "dateTime" : "2022-05-28T00:45:00Z" ,
        "measure" : "http://measurement_3/abc" ,
        "value" : 0.066
      }
]

我能够使用以下代码显示 3 列 'dateTime'、'measure'、'value'。

class App extends React.Component{

  state ={
    items:[]
  };

  async componentDidMount(){
    const response = await fetch('/L1931/readings?today');
    const body = await response.json();
    this.setState({items:body.items});
  }
  render(){
    const {items} = this.state;
    const itemList = items.map(item => {
        return <tr key={item.dateTime}>
            <td style={{whiteSpace: 'nowrap'}}>{item.dateTime}</td>
            <td>{item.value}</td>
            <td>{item.measure}</td>
        </tr>
    });

    return (
      <div>
              <Table className="mt-4">
                  <thead>
                  <tr>
                      <th width="30%">Date</th>
                      <th width="30%">Value</th>
                      <th width="40%">Measurement</th>
                  </tr>
                  </thead>
                  <tbody>
                  {itemList}
                  </tbody>
              </Table>
      </div>
  );


  }
}

输出就像

现在，我想调用'Measurement'列下的子API，显示table中的某列。谁能帮我实现这个目标？

Answer 1

您可以将 Promise.all() 用于该用例。以下示例将调用所有度量 URL，然后将每个度量字段替换为 API 响应。

  async componentDidMount() {
    const response = await fetch("/L1931/readings?today");
    const body = await response.json();

    Promise.all(
      body.items.map(async (item) => {
        const res = await fetch(item.measure);
        const data = await res.json();
        return { ...item, measure: JSON.stringify(data) };
      })
    ).then((newItems) => {
      this.setState({ items: newItems });
    });
  }

您可以根据需要更改 return { ...item, measure: JSON.stringify(data) } 格式。

工作演示

在 React JS 中调用子 API

Calling child API in React JS

rest

reactjs

react-hooks