0
228
VistasReactJS cómo actualizar la página después de obtener datos
Soy nuevo en ReactJS y ahora estoy tratando de hacer una sección de comentarios interactivos (tomada de frontendmentor.io), pero el componente de la aplicación simplemente no muestra lo que se supone que debe mostrar.
Este es mi componente de App :
function App() { const [data, setData] = useState([]); useEffect(() => { const getComm = async () => { await fetchData(); }; getComm(); }, []); console.log(data); const fetchData = async () => { const res = await fetch("db.json").then(async function (response) { const comm = await response.json(); setData(comm); return comm; }); }; return ( <Fragment> {data.length > 0 ? <Comments data={data} /> : "No Comments to Show"} </Fragment> ); } export default App; El console.log(data) registra dos veces:
- la primera vez es un Array vacío;
- la segunda vez es el Array con mis datos dentro.
Como sigue: 
Si obligo a la App a imprimir los Comments , simplemente dice que no se puede mapear a través de una variable indefinida
Este es mi componente de Comments :
function Comments({ data }) { return ( <div> {data.map((c) => ( <Comment key={c.id} /> ))} </div> ); } export default Comments; Me pregunto por qué la página aún muestra No Comments to Show incluso si el registro es correcto.
2 Respuestas
Responde la pregunta0
El estado inicial de sus data es una matriz.
Después de obtener sus datos de la respuesta, obtiene un objeto. Cambiar los tipos de estado no es una buena práctica. Debe mantener su estado de data como una matriz o como un objeto.
Teniendo en cuenta que lo mantendrá como una matriz, necesita usar una matriz dentro de setData . Ex.
comm && Array.isArray(comm.comments) && setData(comm.comments); En cuanto a su componente Comments , debe considerar esperar una matriz, no un objeto.
Ex.
function Comments(data) { return ( <div> {data.map((c) => ( <Comment key={c.id} /> ))} </div> ); } export default Comments;0
@Cristian-Irimiea Tiene razón sobre la respuesta obtenida de fetch. La respuesta es un objeto y no se puede iterar. Debe almacenar en estado los comments de la respuesta.
Pero tienes varios errores:
- Eche un vistazo a cómo usar la función asíncrona . Su función
fetchDatase ve mal.
// Your function const fetchData = async () => { const res = await fetch("db.json").then(async function (response) { const comm = await response.json(); setData(comm); return comm; }); }; // How can refactor // fetchData function have responsibility to only fetch data and return a json const fetchData = async () => { const response = await fetch("./db.json"); const body = await response.json(); return body; };- Está actualizando el estado dentro de la función de búsqueda, pero una buena solución es actualizar el estado y luego prometer resolver:
useEffect(() => { // here we use .then to get promise response and update state fetchData().then((response) => setData(response.comments)); }, []);