Блог

Я начал создавать веб-приложение, такое как Facebook Messenger, в React.js . Я получаю некоторые данные от пользователя, а затем использую состояние, и оно работает отлично. Я показываю этот ввод в консоли, который также работает отлично, как это видно на скриншоте консоли

проблема в том, что я пытаюсь показать ввод (который вводит пользователь), и он не работает Вот мой код

 
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;
  

Вы должны использовать map() which выполняет итерацию по списку, преобразует каждый элемент этого списка и возвращает другой список того же размера с преобразованными элементами, вместо forEach() которого выполняется итерация по списку и применяется некоторая операция с побочными эффектами к каждому элементу списка.

Способ 1:

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

Способ 2:

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

Используйте map вместо forEach . map метод вернет новый массив с результатом функции обратного вызова для каждого элемента в массиве.

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

Рабочая демонстрация: — https://codesandbox.io/s/compassionate-chatterjee-2eml6?file=/src/App.js

Снимок:

 
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;

  

Вот ссылка на рабочий код изолированной среды