2
votes

Impossible de rendre le tableau dans React à l'aide de Array.map

J'utilisais axios pour OBTENIR un tableau de noms d'utilisateur et utiliser setState pour mettre à jour l'état. J'ai enregistré les users dans la console pour m'assurer qu'il s'agit d'un tableau.

<h3>Edit Exercise</h3>
            <form onSubmit={onSubmit}>
                <div className="form-group">
                    <label>Username: {state.users}</label>
                    {/* <select required className="form-control"
                        value={state.username} onChange={onChangeUsername}>
                        {
                            state.users.map(function (user) {
                                return <option key={user} value={user}>{user}</option>
                            })
                        }
                    </select> */}
                </div>

Lorsqu'il est rendu dans JSX. La méthode map du tableau renvoie une erreur non définie. Cependant, le tableau peut être rendu sous forme de chaîne.

axios.get("http://localhost:5000/users/")
        .then((res) => {
            if (res.data.length > 1) {
                const users = res.data.map(el => el.username);

                setState((preValue) => {
                    return {
                        ...preValue,
                        users : users
                    }
                })
                console.log(state)
            }

        })
        .catch((err)=>console.log(err))

javascript reactjs axios

2 commentaires

vous devez vérifier que les utilisateurs contiennent des données ou non. avant le rendu.

Une possibilité est que la liste des utilisateurs du backend soit vide, donc si la condition res.data.length > 1 n'est pas satisfaite, l' state ne sera pas mis à jour. Afin d'éviter cela, vous pouvez this.state = { users: [] } l'état comme this.state = { users: [] } . Lors du rendu, vous pouvez également utiliser (state.users || []).map ou state.users?.map afin d'éviter le crash.

3 Réponses :

1
votes

Vous devez d'abord vérifier si les utilisateurs de la propriété existent: !!state.users && state.users.map(function (user) { .

0 commentaires

1
votes

Peut-être que users est un tableau, mais lorsque react rend vos utilisateurs jsx est vide car il n'est pas fini de récupérer vos données, ce qui signifie que les utilisateurs sont vides ou non définis. Pour revenir ce premier essai si le tableau des utilisateurs est défini

<div className="form-group">
    <label>Username: {state.users}</label>
    {/* <select required className="form-control"
        value={state.username} onChange={onChangeUsername}>
        {
            state.users.length > 0 && state.users.map(function (user) {
                return <option key={user} value={user}>{user}</option>
            })
        }
    </select> */}
</div>

Vous pouvez également vérifier la longueur si cela n'a pas fonctionné

<div className="form-group">
    <label>Username: {state.users}</label>
    {/* <select required className="form-control"
        value={state.username} onChange={onChangeUsername}>
        {
            state.users && state.users.map(function (user) {
                return <option key={user} value={user}>{user}</option>
            })
        }
    </select> */}
</div>

1 commentaires

Oui, cela a fonctionné. Je pense que c'est comme ce que vous avez dit, le JSX est rendu avant que la promesse ne soit résolue.

1
votes

Si votre composant est un composant de classe, vous devez utiliser ce mot-clé avant state (this.state.users). Lorsque vous utilisez la carte, vous pouvez vérifier si elle est indéfinie ou nulle à l'aide du chaînage facultatif .

Donc ce sera comme ça:

{ this.state?.users.map(function (user) {
                                return <option key={user} value={user}>{user}</option>
                            })
}

0 commentaires