我如何从其余 api 呈现表格

Question

{
  "firma": {
    "serialNo": 12345,
    "companyName": "facebook",
    "email": "admin@admin",
    "bankNo": 987,
    "adress": "london",
    "faturas": [
      {
        "fid": 123,
        "updateDate": [2021, 12, 14],
        "sellDate": 1241231,
        "price": 1500
      }
    ]
  }
}

这是我从 API 获得的 json。我正在尝试使用 React 为给定的 API 创建一个前端：

class UserComponents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    };
  }

  componentDidMount() {
    UserService.getFatura().then((response) => {
      this.setState({ users: response.data });
    });
  }

  render() {
    return (
      <div>
        <h2 className="text-center">Faturalar</h2>
        <div className="row">
          <table className="table table-striped table-bordered">
            <thread>
              <tr>
                <th>User serialNo</th>
                <th>User companyName</th>
                <th>User email</th>
                <th>User bankNo</th>
                <th>User adress</th>
              </tr>
            </thread>
            <tbody>
              {this.state.users.map((users) => (
                <tr key={users.serialNo}>
                  <td> {users.serialNo}</td>
                  <td> {users.companyName}</td>
                  <td> {users.email}</td>
                  <td> {users.bankNo}</td>
                  <td> {users.adress}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default UserComponents;

问题是我无法将 json 中的 faturas 放到我的表中以做出反应。我尝试了一些代码但没有用我很新，需要帮助来做出反应。请尽可能简单。 注意：firma 和 faturas 是一对多的关系 serialNo 是 faturas 中的外键。

Answer 1

您的数据有子字段firma。如果你想先打印数据，你必须得到这个字段。

像这样;

{this.state.users.map(({firma}) => ( // javascript can get property like this
  <tr key={firma.serialNo}>
  <td> {firma.serialNo}</td>
  <td> {firma.companyName}</td>
  <td> {firma.email}</td>
  <td> {firma.bankNo}</td>
  <td> {firma.adress}</td>
 </tr>
))}

或者这个；

{this.state.users.map((user) => (
  <tr key={user.firma.serialNo}>
  <td> {user.firma.serialNo}</td>
  <td> {user.firma.companyName}</td>
  <td> {user.firma.email}</td>
  <td> {user.firma.bankNo}</td>
  <td> {user.firma.adress}</td>
 </tr>
))}

如果你想打印faturas，你可以使用这个；

{this.state.users.map((user) => (
  <tr key={user.firma.serialNo}>
  <td> {user.firma.serialNo}</td>
  <td> {user.firma.companyName}</td>
  <td> {user.firma.email}</td>
  <td> {user.firma.bankNo}</td>
  <td> {user.firma.adress}</td>
  <td> {user.firma.faturas.map((fatura) => (<div>
       <p>Fatura ID : {fatura.fid}</p>
       <p>Sell Date: {fatura.sellDate}</p>
       <p>Price: {fatura.price}</p>
     </div>)
  )}</td>
 </tr>
))}