React Component 渲染两次，第一次渲染时 props 'undefined'

Question

我有一个渲染两次的反应子组件（FinalReport.js），除了在第一次渲染时，其中一个道具由于某种原因未定义，这会引发错误。 当然，我可以添加错误处理，但这似乎不是最佳实践。

父组件包含用户输入，这些输入在按下“保存”按钮时保存为 useState Hook (esrData)。 第一个子组件 (Airload.js) 包含更多输入并调用 API，并将结果保存为 useStateHook (airLoadRes)。 两个钩子都在父组件中定义并作为道具传递。 有问题的子组件（FinalReport.js）只有在两个钩子都可用时才会呈现，然后传递钩子。 为什么 FinalReport 渲染两次，为什么 airLoadRes 在第一次渲染时未定义？ 未使用严格模式。 任何帮助表示赞赏！

父组件

const GenerateEnergySavings = () => {

    const [esrData, setEsrData] = useState();
    const [airLoadRes, setAirLoadRes] = useState();

...

return( ...
// Child Component 2
 {(esrData && airLoadRes != undefined)  ?
         <PDFViewer height='1000px' width='1000px'>
             <FinalReport esrData={esrData} airLoadRes={airLoadRes} />
         </PDFViewer> : ''}
...
// Child Component 1 (API)
<Airload airLoadRes={airLoadRes} setAirLoadRes={setAirLoadRes} />

子组件 1 编辑：我应该提到这是一个引导模式

const Airload = ({ airLoadRes, setAirLoadRes }) => {

...

  // Airload API
    const getAirLoadCalc = async () => {
        console.log(airloadData)
        await Axios.post('https://localhost:44418/airload', airloadData)
        .then(res => {
            setAirLoadRes(res.data)
            console.log(res)
            setKey(6)
        }).catch(err => {
            alert(err)
        })
    }
}

子组件 2

// This is rendering twice!! ONLY airLoadRes comes in as undefined on first render
export const FinalReport = ({ esrData, airLoadRes }) => {

    console.log(esrData)
    console.log(airLoadRes)

...

Answer 1

1. 此代码（ const [airLoadRes, setAirLoadRes] = useState(); ）将 airLoadRes 初始化为未定义。

   这就是为什么它在第一次渲染时未定义。

2. React 会在 state、上下文或属性的每次更改时呈现。 所以，我猜 FinalReport 被渲染两次是因为 esrData state 的变化。 或代码中可能包含的其他 state。