Question

我有一个包含一些嵌套条件的表。

基本上，我有两个api电话。一个检索新车列表，另一个检索对该车感兴趣的客户列表。

我想填充一个包含两列的表：

汽车名称|对汽车感兴趣的顾客

马自达Miata |玛丽珍和另外一个

Honda Civic | Billy Joel和另外5人

所以第一次api电话/库存/：idOfDealership /汽车返回

＆＃13;

[
{name: "Mazda Miata", idOfCar: 16},
{name: "Ford Fiesta", idOfCar: 18},
{name: "Honda Civic", idOfCar: 90}
]

＆＃13;

并且第二次api调用将根据第一次的结果进行，我会抓住汽车的id并将其插入第二次api调用/ customers /：idOfCar / interestedCustomers 哪会回来

＆＃13;

 [
      {name: "MacInteyer Williams", id: 1},
      {name: "Deborah Fierce", id: 2},
       {name: "Mary Jane", id:3 }
     ]

＆＃13;

棘手的是我正在根据这些值填充表格。我把表用于第一次API调用。但我想知道如何在第二栏填写客户通知，例如＆＃34; Mary Jane和其他2人＆＃34;

＆＃13;

import React from 'react';
import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn
} from 'material-ui/Table';

export default class PolicyTable extends React.Component {
  state = { TableData: [], data: [] };
  getInitialState() {
    return { data: [], TableData: [] };
  }

  componentDidMount() {
    let initialConditions = [];
    let self = this;
    fetch('http://localhost:3000/inventory/:idOfDealership/cars')
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log(data);
        self.setState({ TableData: data });
      });

    fetch('http://localhost:3000/customers/16/customersToNotify')
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log(data);
        self.setState({ customersToNotify: data });
      });
  }

  render() {
    return (
      <div>
        <div>
          <Table>
            <TableHeader displaySelectAll={false}>
              <TableRow>
                <TableHeaderColumn>Status</TableHeaderColumn>
                <TableHeaderColumn>Name</TableHeaderColumn>
                <TableHeaderColumn>Customers To Contact</TableHeaderColumn>
              </TableRow>
            </TableHeader>
            <TableBody displayRowCheckbox={false}>
              {this.state.TableData.map((TableData, i) => (
                <TableRow key={i} value={name}>
                  <TableRowColumn />
                  <TableRowColumn>{TableData.name}</TableRowColumn>
                  <TableRowColumn />
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </div>
    );
  }
}

＆＃13;

到目前为止，我认为我必须在每个.map迭代上调用fetch，方法是从第一个api调用中获取id，将其插入第二个api调用，然后将结果放入该单元格中。

有人可以验证我对此的看法吗？这是一个有趣的问题，我想确保我以正确的方式解决这个问题。

嵌套api调用填充React

0 个答案: