Обновление состояния компонента с использованием реквизита с функциональными компонентами - PullRequest
Новая
       0

Обновление состояния компонента с использованием реквизита с функциональными компонентами

2 голосов
/ 24 сентября 2019

Я пытаюсь обновить состояние моего компонента, используя реквизиты, которые я получаю от родительского компонента, но я получаю следующее сообщение об ошибке:

Слишком много повторных визуализаций.React ограничивает количество визуализаций, чтобы предотвратить бесконечный цикл.

Я хочу обновить локальное состояние, если пропел изменяет.Подобные сообщения ( Обновление состояния компонента с помощью props , Обновление состояния с помощью props на дочернем компоненте React , Обновление состояния компонента с использованием props ) не исправили его для меня.

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

Ответы [ 2 ]

3 голосов
/ 24 сентября 2019

Вам нужно использовать хук 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 ограничивает число визуализаций, чтобы предотвратить бесконечный цикл.

В данном случае происходит то, что когда ваш компонент выполняет рендеринг, он выполняет все в функции, вызывая setPlanetData, который будет повторно выполнять компонент, вызываявсе внутри функции снова (setPlanetData снова) и создание бесконечного цикла.

0 голосов
/ 24 сентября 2019

Вам лучше не обновлять свое состояние с помощью реквизита.Как правило, это затрудняет рассуждение о компоненте и часто может привести к неожиданным состояниям и устаревшим данным.Вместо этого я хотел бы рассмотреть что-то вроде: 

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

Для этого может потребоваться немного больше логики в родительском компоненте, чтобы контролировать то, что отображается, когда выбранная реквизита ложна, но это гораздо более идиоматический React.

...