Probé muchas cosas, pero soy un principiante en ReactJs y creo que es un problema simple, pero no puedo solucionarlo. Estoy usando un componente sin estado porque necesito usar la función useParams(). Necesito hacer un bucle en mis mensajes, así que usé Object.keys(messages).map( (key) => (... Pero parece que no toma la clave adecuada porque esto es lo que veo en mi información de Chrome en el componente:
Aplicación -> tecla de mensaje = 'mensajes'
mensaje de accesorios: indefinido
pseudo: no define
Mi código :
import React, {useState} from 'react' import './App.css'; import Formulaire from './components/Formulaire'; import Message from './components/Message'; import {useParams} from 'react-router-dom' function App () { const [messages, setMessages] = useState({}) function addMessage (message) { messages[`message-${Date.now()}`] = message // permet d'avoir un TimeStamp unique pour chaque message setMessages( messages ) } const {pseudo} = useParams() const mess = Object.keys(messages).map( (key) => ( <Message key={key} message={messages[key].message} pseudo={messages[key].pseudo} /> )) return ( <div className="box" > <div> <div className='messages'> {mess} </div> </div> <Formulaire length= {150} pseudo= {pseudo} addMessage = {addMessage} /> </div> ); } export default App;Mes versiones
"name": "chat-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", "@testing-library/user-event": "^13.5.0", "firebase": "^9.6.11", "prop-types": "^15.8.1", "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-transition-group": "^4.4.2", "web-vitals": "^2.1.4"Aquí hay un enlace a un entorno limitado para mi problema (es decir, no aparecen mensajes) https://codesandbox.io/s/chat-app-7e2dmw?file=/src/App.js
EDITAR: el problema parece ser que addMessage y const mess se leen en la actualización de la página y no todo el tiempo. ¿Sabes dónde ponerlos?
Creo que lo que te está causando un problema es la forma en que configuras tus mensajes.
Primero, por lo que aprendí, no debe manipular los valores de los estados directamente a menos que esté seguro de lo que está haciendo. En este caso, parece muy bien.
En segundo lugar, está configurando un objeto que contiene su objeto de mensajes al escribir setMessages({ messages }) y es por eso que su clave se convierte en mensajes.
Terminas con un objeto como:
{ messages: { message-timestamp : {}, message-timestamp2 : {}, ... } } Lo que debe intentar hacer es setMessages(messages) para obtener:
{ message-timestamp : {}, message-timestamp2 : {}, ... }El problema aquí para mostrar el mensaje es que está asignando una variable incorrecta al estado:
function addMessage(message) { messages[`message-${Date.now()}`] = message; console.log("message", message); // permet d'avoir un TimeStamp unique pour chaque message setMessages(message); }el mensaje es la variable que contiene los datos que necesita