如果 react js axios 中没有可用数据，如何显示“没有可用数据”消息？答案

【问题标题】：How can show "no data available" message if there will be not data available in react js axios?如果 react js axios 中没有可用数据，如何显示“没有可用数据”消息？
【发布时间】：2020-02-19 12:42:33
【问题描述】：

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

{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>
            ))}

如果此表中的数据不可用，则应显示“无可用数据”消息，请帮助我，谢谢

【问题讨论】：

标签： reactjs api axios error-messaging

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>>}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：