1
votes

L'état n'affiche rien sur la page Web mais s'affiche dans la console React.js

J'ai commencé à créer une application Web comme Facebook Messenger dans React.js. Je reçois des commentaires de l'utilisateur, puis j'utilise l'état et cela fonctionne parfaitement. Je montre cette entrée dans la console qui fonctionne également parfaitement comme on peut le voir sur la capture d'écran de la console

le problème est que j'essaie d'afficher l'entrée (quel utilisateur entre) et cela ne fonctionne pas Voici mon code

import React, {useState} from 'react';
import './App.css';

function App() {

    const [input, setInput] = useState('');
    const [messages,setMessages]=useState([]);

    console.log(messages);
    const sendMessage = (event)=>{
        setMessages([...messages,input]);
        setInput('');
    }

    return <div className="App">
        <h1>Messenger</h1>
        <input value={input} onChange={event => setInput(event.target.value)}/>
        <button onClick={sendMessage}>Send Message</button>

        {
            messages.forEach(message =>{
                <p>{message}</p>
            })
        }
    </div>;
}

export default App;

javascript reactjs

0 commentaires

3 Réponses :

0
votes

Instantané:

import React, {useState} from 'react';
function App() {

    const [input, setInput] = useState('');
    const [messages,setMessages]=useState([]);

    console.log(messages);
    const sendMessage = (event)=>{
        setMessages([...messages,input]);
        setInput('');
    }

    return <div className="App">
        <h1>Messenger</h1>
        <input value={input} onChange={event => setInput(event.target.value)}/>
        <button onClick={sendMessage}>Send Message</button>

        {
            messages.map(message =>
                <p>{message}</p>
            )
        }
    </div>;
}

export default App;

Voici le lien sandbox du code de travail

3 commentaires

J'ai utilisé map () au lieu de forEach () mais cela pose le même problème

vous utilisiez très probablement une map comme messages.map(message =>{ <p>{message}</p>} ) qui ne renvoie rien donc aucune sortie n'est affichée à l'écran.

:) Bon codage

1
votes

Vous devez utiliser map() qui itère sur une liste, transforme chaque membre de cette liste et renvoie une autre liste de la même taille avec les membres transformés au lieu de forEach() qui itère sur une liste et applique une opération avec des effets secondaires à chaque membre de la liste.

Méthode 1:

{
   messages.map((message) =>{
     return <p>{message}</p>
    })
}

Méthode 2:

{
   messages.map((message) =>(
        <p>{message}</p>
    ))
}

0 commentaires

1
votes

Utilisez map au lieu de forEach . map renvoie un nouveau tableau avec le résultat de la fonction de rappel pour chaque élément du tableau.

  { messages.map(message => <p>{message}</p>)}

Démo de travail: - https://codesandbox.io/s/compassionate-chatterjee-2eml6?file=/src/App.js

0 commentaires