2

如果从 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>
            ))}

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

4

3 回答 3

1

只需在条件运算符的帮助下检查您的对象长度或映射之前的空/未定义。

{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>>}
于 2019-10-23T09:59:33.230 回答
0

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

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

 {this.state.movies.length>0 ? 'Your table code' : 'Data is not available'}
于 2019-10-23T09:59:24.897 回答
0

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

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

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

于 2019-10-23T10:10:05.080 回答