Cuando entro en un enrutador que se refiere a este componente, mi navegador simplemente falla. Hice algunas pruebas de consola y me di cuenta de que cuando response.data.message está activo, vuelve a renderizar la página continuamente. ¿Alguien me puede ayudar?

import React from 'react'
import "./UsernameStory.css";
import Axios from "axios";




const UsernameStory = ({match}) => {

    const [statue , setStatue] = React.useState("");
    const [stories , setStories] = React.useState([]);

    const fetchUsername = () => {
        const urls = match.params.username;
        Axios.post("http://localhost:8080/"+urls, {

        }).then((response) => {
            if(response.data.statue)
            {
                setStatue(response.data.statue);
            }
            if(response.data.message){
                setStories(response.data.message);
            }
        })
    }


    return (
        <div>
            {fetchUsername()}
            <p>{statue}</p>
            <ul>
                {stories.map((story , key) => (<li key={key}>{story.username}</li>))}
            </ul>
        </div>
    )
}

export default UsernameStory
0
MH15O 12 jul. 2021 a las 19:45

4 respuestas

La mejor respuesta

En cada renderizado, se llama a fetchUsername() y da como resultado la actualización de statue y stories, lo que da como resultado otro renderizado y, por lo tanto, conduce a un bucle infinito de renderizado (ya que cada renderizado desencadena una actualización de estado ).

Una mejor práctica para manejar funciones con efectos secundarios como la obtención de datos es poner fetchUsername en useEffect.

const UsernameStory = ({match}) => {

    const [statue , setStatue] = React.useState("");
    const [stories , setStories] = React.useState([]);

    useEffect(() => {
        const urls = match.params.username;
        Axios.post("http://localhost:8080/"+urls, {})
            .then((response) => {
                if(response.data.statue)
                {
                    setStatue(response.data.statue);
                }
                if(response.data.message){
                    setStories(response.data.message);
                }
            });
    }, []); // An empty denpendency array allows you to fetch the data once on mount


    return (
        <div>
            <p>{statue}</p>
            <ul>
                {stories.map((story , key) => (<li key={key}>{story.username}</li>))}
            </ul>
        </div>
    )
}

export default UsernameStory
0
PIG208 12 jul. 2021 a las 17:04
  1. No puede llamar a la función fetchUsername () dentro de la declaración de retorno. Irá en bucle infinito.
  2. No puede establecer directamente el estado de dos variables como setStatue (response.data.statue) y setStories (response.data.message) respectivamente
  3. use los ganchos useEffect y establezca el estado dentro de los ganchos con renderizado condicional para evitar bucles.
  4. llame a fetchUsername () justo antes de la declaración de retorno.
0
Amit Maurya 12 jul. 2021 a las 17:02

Miré tu código cuidadosamente. Como puede ver en este código, la función fetchUsername () se ejecuta cuando el componente se procesa por primera vez. Cuando llama a setState () en la función fetchUsername, la variable de estado de su componente se actualiza. El problema es que cuando se actualiza la variable de estado, el componente se vuelve a renderizar. Entonces se volverá a llamar a la función fetchUsername, ¿verdad? Pruebe el gancho useEffect. Se adjunta el código de ejemplo.

p. ej. código

0
VadimOrlov212 12 jul. 2021 a las 17:18

¿Qué tal si intentas cambiar la forma en que llamas a la función fetchUsername() con el gancho useEffect en su lugar?

import React, { useEffect } from 'react'
import "./UsernameStory.css";
import Axios from "axios";


const UsernameStory = ({match}) => {

    const [statue , setStatue] = React.useState("");
    const [stories , setStories] = React.useState([]);

    useEffect(() => {
        const fetchUsername = () => {
            const urls = match.params.username;
            Axios.post("http://localhost:8080/"+urls, {

            }).then((response) => {
                if(response.data.statue)
                {
                    setStatue(response.data.statue);
                }
                if(response.data.message){
                    setStories(response.data.message);
                }
            })
        }

        fetchUsername();

        // clean up here 
        return () => {
            // something you wanna do when this component being unmounted
            // console.log('unmounted')
        }
    }, [])


    return (
        <div> 
            <p>{statue}</p>
            <ul>
                {stories.map((story , key) => (<li key={key}>{story.username}</li>))}
            </ul>
        </div>
    )
}

export default UsernameStory

Pero, a veces, su código simplemente no necesita una limpieza en algunos escenarios, puede leer más sobre esto aquí: Uso del gancho de efectos - Documentación de React.

0
Richie Permana 12 jul. 2021 a las 17:23