如果 React js axios 中没有可用数据，如何显示 "no data available" 消息？

Question

如果在 React js 中从 API 获取数据后没有数据，我想显示一条消息 "no data available " 我不知道该怎么做你可以查看我的代码并指导我

{this.state.movies1.map(c => (
              <tbody key={c.pk}>
                <tr>
                  <th scope="row">{c.pk}</th>
                  <td>
                    <a
                      href="/overview/4343"
                      style={{ color: "#13B760" }}
                      class="font-weight-bold"
                    >
                      {c.user}
                    </a>
                  </td>
                  <td>{c.total_milage ? `${c.total_milage}` : 0} </td>
                  <td>{c.total_movingtime ? `${c.total_movingtime}` : 0} </td>
                  <td>
                    {c.total_averagespeed ? `${c.total_averagespeed}` : 0} 
                  </td>
                  <td>{c.total_letter ? `${c.total_letter}` : 0} </td>
                  <td>
                    {c.total_ship_weight ? `${c.total_ship_weight}` : 0}
                  </td>
                  <td>{c.total_pack ? `${c.total_pack}` : 0}</td>
                  <td>{c.total_kg ? `${c.total_kg}` : 0} </td>
                  <td>{c.total_co2_save ? `${c.total_co2_save}` : 0}  </td>
                  <td>{c.total_boxes ? `${c.total_boxes}` : 0}</td>
                  <td>{c.total_user ? `${c.total_user}` : 0}</td>
                </tr>
              </tbody>
            ))}

如果数据在此 table 中不可用，它应该显示一条消息 "no data available " 所以帮助我谢谢

Answer 1

您可以在 jsx 本身上添加条件渲染。计算this.state.movies的长度。基于此，您可以显示 table 或消息。

https://reactjs.org/docs/conditional-rendering.html 或者

 {this.state.movies.length>0 ? 'Your table code' : 'Data is not available'}

Answer 2

在条件运算符的帮助下，在映射之前简单地检查对象长度或 null/undefined。

{this.state.movies1.length > 0 ? this.state.movies1.map(c => (
                  <tbody key={c.pk}>
                    <tr>
                      <th scope="row">{c.pk}</th>
                      <td>
                        <a
                          href="/overview/4343"
                          style={{ color: "#13B760" }}
                          class="font-weight-bold"
                        >
                          {c.user}
                        </a>
                      </td>
                      <td>{c.total_milage ? `${c.total_milage}` : 0} </td>
                      <td>{c.total_movingtime ? `${c.total_movingtime}` : 0} </td>
                      <td>
                        {c.total_averagespeed ? `${c.total_averagespeed}` : 0} 
                      </td>
                      <td>{c.total_letter ? `${c.total_letter}` : 0} </td>
                      <td>
                        {c.total_ship_weight ? `${c.total_ship_weight}` : 0}
                      </td>
                      <td>{c.total_pack ? `${c.total_pack}` : 0}</td>
                      <td>{c.total_kg ? `${c.total_kg}` : 0} </td>
                      <td>{c.total_co2_save ? `${c.total_co2_save}` : 0}  </td>
                      <td>{c.total_boxes ? `${c.total_boxes}` : 0}</td>
                      <td>{c.total_user ? `${c.total_user}` : 0}</td>
                    </tr>
                  </tbody>
                )): <div>No Data avaliable</div>>}

Answer 3

假设您期望空数组，您可以使用 conditional rendering。如果是这种情况，您可以添加这样的支票：

{!this.state.movies1 ? <div>no data</div> : ... // the rest of your code goes here in case there is data found.

这会处理空数组和其他虚假值，但您应该首先小心处理 API 响应，因为您可能会收到错误消息而不是空 array/null/undefined 值。

如果 React js axios 中没有可用数据，如何显示 "no data available" 消息？

How can show "no data available" message if there will be not data available in react js axios?

api

reactjs

axios

error-messaging