Question

在React中，我有一个功能组件，在单击一个子组件按钮（“ GenerateButton”）后，应该启动另一个子组件（“ UsersView”）的呈现，该子组件随后将显示用户从REST API中提取。

在调试时，我注意到即使将“ dataShouldLoad”状态切换为true，尽管“ dataShouldLoad”已通过并用作道具，但它甚至都没有尝试开始在“ UsersView”组件中加载代码。为什么是这样？我该怎么办？

这是我的简化代码段：

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甚至不是DOM中GenerateReportView的子组件，就像您输入的逻辑一样-当dataHasLoaded为假时，UsersView不会作为子元素出现组件。

React useState钩子不会触发子组件的重新渲染

2 个答案: