React如何将REST API返回JSON中的faturas字段渲染到表格中

1. 接口返回的JSON根节点是firma对象，不是数组，原代码直接对对象调用map方法会报错
2. 需要渲染的faturas是嵌套在firma下的子数组，需要提取后关联上所属firma的公共字段
3. 原代码中<thread>是拼写错误，正确的表头标签为<thead>

第一步 修正接口数据存入state的逻辑 #

在请求接口后，把firma的公共字段合并到每一条fatura数据中，生成可直接遍历渲染的数组

componentDidMount() {
  UserService.getFatura().then((response) => {
    const firmaData = response.data.firma;
    // 合并公司公共字段到每一条账单数据中
    const faturaList = firmaData.faturas.map(fatura => ({
      ...fatura,
      serialNo: firmaData.serialNo,
      companyName: firmaData.companyName,
      email: firmaData.email,
      bankNo: firmaData.bankNo,
      adress: firmaData.adress
    }));
    this.setState({ users: faturaList });
  });
}

第二步 修正表格结构，补全faturas对应列 #

render() {
  return (
    <div>
      <h2 className="text-center">Faturalar</h2>
      <div className="row">
        <table className="table table-striped table-bordered">
          <thead>
            <tr>
              <th>User serialNo</th>
              <th>User companyName</th>
              <th>User email</th>
              <th>User bankNo</th>
              <th>User adress</th>
              <!-- 新增faturas字段的表头，可根据需求调整 -->
              <th>账单ID</th>
              <th>更新日期</th>
              <th>售卖日期</th>
              <th>价格</th>
            </tr>
          </thead>
          <tbody>
            {this.state.users.map((fatura) => (
              <!-- 使用faturas的唯一id fid作为行key -->
              <tr key={fatura.fid}>
                <td> {fatura.serialNo}</td>
                <td> {fatura.companyName}</td>
                <td> {fatura.email}</td>
                <td> {fatura.bankNo}</td>
                <td> {fatura.adress}</td>
                <!-- 渲染faturas字段，updateDate是数组拼接为日期字符串 -->
                <td> {fatura.fid}</td>
                <td> {fatura.updateDate.join('-')}</td>
                <td> {new Date(fatura.sellDate).toLocaleDateString()}</td>
                <td> {fatura.price}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

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

  componentDidMount() {
    UserService.getFatura().then((response) => {
      const firmaData = response.data.firma;
      const faturaList = firmaData.faturas.map(fatura => ({
        ...fatura,
        serialNo: firmaData.serialNo,
        companyName: firmaData.companyName,
        email: firmaData.email,
        bankNo: firmaData.bankNo,
        adress: firmaData.adress
      }));
      this.setState({ users: faturaList });
    });
  }

  render() {
    return (
      <div>
        <h2 className="text-center">Faturalar</h2>
        <div className="row">
          <table className="table table-striped table-bordered">
            <thead>
              <tr>
                <th>User serialNo</th>
                <th>User companyName</th>
                <th>User email</th>
                <th>User bankNo</th>
                <th>User adress</th>
                <th>账单ID</th>
                <th>更新日期</th>
                <th>售卖日期</th>
                <th>价格</th>
              </tr>
            </thead>
            <tbody>
              {this.state.users.map((fatura) => (
                <tr key={fatura.fid}>
                  <td> {fatura.serialNo}</td>
                  <td> {fatura.companyName}</td>
                  <td> {fatura.email}</td>
                  <td> {fatura.bankNo}</td>
                  <td> {fatura.adress}</td>
                  <td> {fatura.fid}</td>
                  <td> {fatura.updateDate.join('-')}</td>
                  <td> {new Date(fatura.sellDate).toLocaleDateString()}</td>
                  <td> {fatura.price}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default UserComponents;

内容的提问来源于stack exchange，提问作者MEF