Comment afficher le message "no data available" s'il n'y a pas de données disponibles dans react js axios ?

Question

Je veux afficher un message "no data available" s'il n'y a pas de données après la récupération de l'API dans react js. Je ne sais pas comment faire, vous pouvez regarder mon code et me guider.

{this.state.movies1.map(c => (
              <tbody key={c.pk}>
                <tr>
                  <th scope="row">{c.pk}</th>
                  <td>
                    <a
                      href="stackoverflow.com/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>
            ))}

Si les données ne sont pas disponibles dans ce tableau, il doit afficher un message "aucune donnée disponible", alors aidez-moi.

Answer 1

Il suffit de vérifier la longueur de l'objet ou son caractère nul ou indéfini avant de le mettre en correspondance avec l'opérateur conditionnel.

{this.state.movies1.length > 0 ? this.state.movies1.map(c => (
                  <tbody key={c.pk}>
                    <tr>
                      <th scope="row">{c.pk}</th>
                      <td>
                        <a
                          href="http://stackoverflow.com/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

Vous pouvez ajouter un rendu conditionnel sur le jsx lui-même. calculez la longueur de this.state.movies. en fonction de cela, vous pouvez soit afficher le tableau, soit un msg.

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

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

Answer 3

En supposant que vous attendez un tableau vide, vous pouvez utiliser Rendu conditionnel . Si c'est le cas, vous pourriez ajouter une vérification comme celle-ci :

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

Cela prend en charge les tableaux vides et les autres valeurs erronées, mais vous devez faire attention à traiter la réponse de l'API en premier lieu, car vous pourriez obtenir un message d'erreur et non un tableau vide/une valeur nulle/indéfinie.