1
votes

Obtention de cet avertissement "Les fonctions ne sont pas valides en tant qu'enfant React"

J'essaie de rendre une liste de films à partir d'un objet de tableau dans un format de table html. Je reçois cet avertissement:

Attention: les fonctions ne sont pas valides en tant qu'enfant React. Cela peut se produire si vous renvoyez un composant au lieu d'un rendu. Ou peut-être avez-vous voulu appeler cette fonction plutôt que la renvoyer.

import React from 'react';
import {movies} from '../services/fakeMovieService';

class Movies extends React.Component {
constructor(props) {
    super(props);

    this.tableFormat = this.tableFormat.bind(this);
}

    tableFormat() {
        movies.map((movie) => {
            return (
                <tr>
                    <td key={movie._id}>{movie.title}</td>
                </tr>
            );
        });
    }


    render() {

        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {this.tableFormat()}
                </tbody>
            </table>

        );
    }
}

export default Movies;

reactjs jsx

1 commentaires

Voici mon nouveau code:

3 Réponses :

0
votes

Veuillez exécuter la fonction comme suit:

<tbody>
   {this.tableformatter()}
</tbody>

0 commentaires

1
votes

Vous avez oublié d'appeler votre fonction.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>

Mais même en faisant, je ne pense pas que le résultat sera ce que vous attendez.

Pour le rendu un tableau d'éléments dans React, vous devez utiliser la fonction map comme dit dans la documentation .

Le résultat suivant serait:

const movies = [
    {
        title: "Spooky",
        genre: 'eziojgf',
        stock: 'nope',
        rate: 87
    },
    {
        title: "Sharknado",
        genre: 'shitty',
        stock: 'yes',
    },
    {
        title: "haha yes"
    },
    {
        title: "uhmmmm",
        rate: -5
    }
]

class Movies extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Stock</th>
                        <th>Rate</th>
                    </tr>
                </thead>
                <tbody>
                    {movies.map(movie =>
                        <tr key={movie.title}>
                            {['title', 'genre', 'stock', 'rate'].map(category => <td key={category}>{movie[category]}</td>)}
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }
}

ReactDOM.render(<Movies />, document.getElementById("root"));

EDIT:

I a fait une faute de frappe et mettez films au lieu de movie.

Le code suivant devrait faire tout ce que vous recherchez en utilisant map et conditions en ligne:

<tbody>
    {movies.map(movie => 
        <tr key={movie.title}>
            <td>{movie.title}</td>
        </tr>
    )}
</tbody>

<tbody>
   {this.tableformatter()}
</tbody>

5 commentaires

Voici mon nouveau code. J'ai suivi nos conseils mais les films ne s'affichent pas. Il n'y a pas non plus d'erreur dans la console. Qu'est-ce que je rate?

À quoi ressemble votre objet movies ?

Comment puis-je coller mon nouveau code dans les commentaires? Désolé, je suis nouveau sur Stackoverflow

Vous pouvez modifier votre réponse. La lecture du code dans un commentaire est assez difficile, sauf s'il s'agit simplement d'un nom de variable. Depuis que j'ai un clavier français, j'imprime des graduations avec alt gr + 7

J'ai modifié le code de ma question. Bien vouloir vérifier.

0
votes

voici la bonne façon de résoudre ce problème avec React

function TableFormatter ({title /* , and other props genre, rate etc. *//}) {
  return (
    <tr>
      <td>{title}</td>
      {/* you may want to add other td here *//}
    </tr>
  )
}

function Table({movies}) {
  render() {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Genre</th>
            <th>Stock</th>
            <th>Rate</th>
          </tr>
        </thead>
        <tbody>
          {movies.map(movie => <TableFormatter key={movie.id} {...movie} />)}
        </tbody>
      </table>
    );
  }
}

0 commentaires