Хук React useState не запускает повторный рендеринг дочернего компонента

Question

В React у меня есть функциональный компонент, который при нажатии кнопки дочернего компонента («GenerateButton») должен запускать рендеринг другого дочернего компонента («UsersView»), который затем отображает список пользователи, извлеченные из REST API.

Во время отладки я замечаю, что даже несмотря на то, что состояние «dataShouldLoad» переключается на true, оно даже не пытается начать загрузку кода в компоненте «UsersView» несмотря на то, что "dataShouldLoad" передается и используется как свойство. Почему это? Что мне делать?

Вот мой упрощенный фрагмент кода:

import React, {useState} from 'react';
import GenerateButton from './GenerateButton.js';
import UsersView from './UsersView.js';

export default function GenerateReportView() {

    const [dataShouldLoad, setDataShouldLoad] = useState(false);
    const [dataHasLoaded, setDataHasLoaded] = useState(false);

    const handleGenerateButtonClick = () => {

      // By toggling this to true, I am attempting to kick off
      // the "UsersView" to fetch its data, and display here
      setDataShouldLoad(true);
    }

    return (
        <div>
            {dataHasLoaded ? 
                <UsersView dataShouldLoad={dataShouldLoad} setDataHasLoaded={setDataHasLoaded}/> 

                : <h2>Click Button to Load</h2> 
            }
            
            <GenerateButton onClick={handleGenerateButtonClick}/>
        </div>
    );
}

Answer 1

Прямо сейчас тернар оценивает dataHasLoaded, а не dataShouldLoad. Измените на dataShouldLoad, и он будет отображаться.

Answer 2

Когда вы устанавливаете новое состояние для useState хука, компонент useState находится в повторном рендеринге, а дочерние компоненты также повторно рендерируются в целом. В вашем коде UsersView даже не является дочерним компонентом GenerateReportView в DOM, поскольку вы помещаете logi c - когда dataHasLoaded ложно, UsersView не является дочерним компонентом.