axios 如何在ReactJS中当来自API的数据为空时显示表

jgwigjjp 于 2023-10-18 发布在 iOS

关注(0)|答案(2)|浏览(123)

当它在API中没有数据时会显示错误，但我希望tbody使用tr显示文本，我的表有3行，我希望它显示文本的tr，如“没有数据”
以下是我的一些代码：

<tbody>
        {
          records.map((d, i) => (
            <tr key={i}>
              <td>{d.id}</td>
              <td>{d.name}</td>             
              <td>
                <Link to={`/update/${d.id}`} className="btn btn-sm btn-success">Update</Link>
                <button onClick = {e => handleSubmit(d.id)} className="btn-del">Delete</button>
              </td>
            </tr>
          ))
        }
        </tbody>
      </table>
    </div>
  );

axios

来源：https://stackoverflow.com/questions/76912330/how-to-show-table-when-the-data-from-api-is-empty-in-reactjs

2条答案

按热度按时间

ltskdhd11#

你可以这样做

<td>{d.id ? d.id : 'no data'}</td>
<td>{d.name ? d.name : 'no data'}</td>

或者像这样

{d ? <tr key={i}>
              <td>{d.id}</td>
              <td>{d.name}</td>             
              <td>
                <Link to={`/update/${d.id}`} className="btn btn-sm btn-success">Update</Link>
                <button onClick = {e => handleSubmit(d.id)} className="btn btn-sm ms-1 btn-danger">Delete</button>
              </td>
            </tr> : <tr>
                      'no data'
                  </tr>}

赞(0）回复(0）举报 2023-10-18

ltskdhd12#

<tbody>
    {recodes.length > 0 ? <>{
      records.map((d, i) => (
        <tr key={i}>
          <td>{d.id}</td>
          <td>{d.name}</td>             
          <td>
            <Link to={`/update/${d.id}`} className="btn btn-sm btn-success">Update</Link>
            <button onClick = {e => handleSubmit(d.id)} className="btn btn-sm ms-1 btn-danger">Delete</button>
          </td>
        </tr>
      ))
    }</> : {
<tr className="no_record text-center">
<td col={3}>
<h4>No Record Found</h4>
 </td>
</tr> 
</tbody>

赞(0）回复(0）举报 2023-10-18

我来回答

axios 如何在ReactJS中当来自API的数据为空时显示表

2条答案

相关问题

热门标签

最新问答