admin管理员组

文章数量:1292701

I am trying to update the state of my ponent using props that I get from the parent ponent, but I get the following error message:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

I want the local state to update if the prop changes. The similar posts (Updating ponent's state using props, Updating state with props on React child ponent, Updating ponent's state using props) did not fixed it for me.

import React, {useState} from "react"


const HomeWorld = (props) => {
    const [planetData, setPlanetData] = useState([]);
    if(props.Selected === true){
        setPlanetData(props.Planet)
        console.log(planetData)
    }


    return(
        <h1>hi i am your starship, type: {planetData}</h1>
    )
}

export default HomeWorld

I am trying to update the state of my ponent using props that I get from the parent ponent, but I get the following error message:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

I want the local state to update if the prop changes. The similar posts (Updating ponent's state using props, Updating state with props on React child ponent, Updating ponent's state using props) did not fixed it for me.

import React, {useState} from "react"


const HomeWorld = (props) => {
    const [planetData, setPlanetData] = useState([]);
    if(props.Selected === true){
        setPlanetData(props.Planet)
        console.log(planetData)
    }


    return(
        <h1>hi i am your starship, type: {planetData}</h1>
    )
}

export default HomeWorld

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Sep 24, 2019 at 13:57 Vencovsky 31.7k2222 gold badges130130 silver badges197197 bronze badges asked Sep 24, 2019 at 13:46 Jonas.DJonas.D 35711 gold badge66 silver badges1414 bronze badges 3

• 1 Why are you trying to update state with props, though? Why not just render props.Planet instead of planetData? – Retsam Commented Sep 24, 2019 at 14:00
• @Retsam I would ask the same question, but as you can see in the other questions that he mentions, I think he really wants to have the prop in the state. – Vencovsky Commented Sep 24, 2019 at 14:05
• I have got same idea with Retsam. – syjsdev Commented Sep 24, 2019 at 14:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You need to use the useEffect hook to run it only once.

import { useEffect }  from 'react'

... 

const HomeWorld = (props) => {
    const [planetData, setPlanetData] = useState([]);

    useEffect(() => {
        if(props.Selected === true){
            setPlanetData(props.Planet)
            console.log(planetData)
        }
    }, [props.Selected, props.Planet, setPlanetData]) // This will only run when one of those variables change

    return(
        <h1>hi i am your starship, type: {planetData}</h1>
    )
}

Please notice that if props.Selected or props.Planet change, it will re run the effect.

Why Do I Get This Error ?

Too many re-renders. React limits the number of renders to prevent an infinite loop.

What is happening here is that when your ponent renders, it runs everything in the function, calling setPlanetData wich will rerender the ponent, calling everything inside the function again (setPlanetData again) and making a infinite loop.

You're generally better off not updating your state with props. It generally makes the ponent hard to reason about and can often lead to unexpected states and stale data. Instead, I would consider something like:

const HomeWorld = (props) => {
    const planetData = props.Selected
        ? props.Planet
        //... what to display when its not selected, perhaps:
        : props.PreviousPlanet

    return(
        <h1>hi i am your starship, type: {planetData}</h1>
    )
}

This might require a bit more logic in the parent ponent, to control what displays when the Selected prop is false, but it's a lot more idiomatic React.

本文标签： javascriptUpdating component39s state using props with functional componentsStack Overflow