Как можно отобразить сообщение «нет данных», если не будет данных, доступных в реагировать на оси?

Question

Я хочу отобразить сообщение «данные недоступны», если после извлечения данных из API не будет данных при реакции js. Я не знаю, как это сделать. Вы можете посмотреть мой код и направить меня

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

Если данные не будут доступны в этой таблице, на экране должно появиться сообщение «нет данных», поэтому помогите мне спасибо

Answer 1

Просто проверьте длину вашего объекта или 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 2

Если вы ожидаете пустой массив, вы можете использовать условный рендеринг . Если это так, вы можете добавить проверку следующим образом:

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

Это заботится о пустом массиве и других ложных значениях, но вы должны быть осторожны с обработкой ответа API в первую очередь, поскольку вы можете получить ошибкусообщение, а не пустой массив / ноль / неопределенное значение.

Answer 3

Вы можете добавить условный рендеринг на самом jsx. рассчитать длину this.state.movies. на основании этого вы можете показать таблицу или сообщение.

https://reactjs.org/docs/conditional-rendering.html или

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