使用带有功能组件的 props 更新组件的状态

Question

我正在尝试使用从父组件获取的 props 更新组件的状态，但收到以下错误消息：

太多的重新渲染。React 限制渲染次数以防止无限循环。

如果道具更改，我希望本地状态更新。类似的帖子（使用道具更新组件的状态，更新与上反应子组件道具状态，更新使用道具组件的状态），没有固定的对我来说。

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

Answer 1

你只需要使用useEffect钩子来运行它一次。

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>
    )
}

请注意，如果props.Selected或 props.Planet更改，它将重新运行效果。

为什么会出现此错误？

太多的重新渲染。React 限制渲染次数以防止无限循环。

这里发生的事情是，当您的组件渲染时，它会运行函数中的所有内容，调用setPlanetDatawich 将重新渲染组件，再次（setPlanetData再次）调用函数内的所有内容并进行无限循环。