如何延迟渲染子组件的反应到父母组件完成获取？

Question

我有一个从WebAPI获取的父组件，并将返回一系列人。 我还有一个孩子组件，该组件想从父母那里接收道具，其中从

我遇到的问题中获得道具，这似乎是在提取完成之前呈现儿童组件。 这是我的代码：

import React from "react";
import { Person} from "./Components";

export function Body({departmentId}){

const [peopleArray,setPeopleArray] = React.useState([]);

    React.useEffect(
        () => {
          const getPeopleArr = async () => {
          
            const response = await
             fetch(`https://xxxx`);           
             const data = await response.json();  
             setPeopleArray(data);       
              
          };
          getPeopleArr();
        }, []);

    return(
        <div>
            <Person name={peopleArray[0].personalDetails.name} position={peopleArray[0].department.name}/>      
        </div>
    );
}

正如您可以从上面看到的那样，最初，Peoperlearray是一个空数组。 React会给我带来错误“ Unturect typeError：无法读取未定义的属性（阅读'hersosyDetails'）” 如果我删除代码＆lt; person name = {peoperlearray [0] .personaldetails.name} position = {peoperlearray [0] .department.name}/＆gt; 等一下，直到获取，然后快速粘贴代码，它成功地显示了人组成部分。

我试图在儿童组件中添加Settimeout，并尝试通过这样做几秒钟延迟它：

setTimeout(() => {
}, "2000")

但这似乎对问题没有帮助。

您能否建议SMTHG我可以在提取之前延迟渲染的孩子组成部分？ 谢谢

编辑： 传递给孩子的每个道具创建多个用途（s

const [name,SetName] = data[0].personalDetails.name;
...

<Person name = {name}>

）

我能想到的一件事是为我想 ？作品...谢谢大家：D

Answer 1

有几种解决这个问题的方法。

最简单的是使用可选的链接。类似的事情：

<Person name={peopleArray[0]?.personalDetails?.name} position={peopleArray[0]?.department?.name}/>

如果peopelearray [0]是未定义的，那么它不会渲染

其他任何解决方案是使用长度：

peopleArray.length > 0 && <Person name={peopleArray[0].personalDetails.name} position={peopleArray[0].department.name}/>

第三个是引入加载状态，默认情况下可以是真实的，您可以在解决Fetch解决后果之后将其更改为false

Answer 2

您应该首先检查变量是否没有空：

{peopleArray.length && <Person name={peopleArray[0]?.personalDetails.name} position={peopleArray[0]?.department.name}/> }

Answer 3

只需引入一个诸如“加载”之类的状态，然后将您的孩子组件呈现：

已加载＆amp; amp; ＆lt; childComponent /＆gt; < /code>

在您的情况下：

import React from "react";
import { Person} from "./Components";

export function Body({departmentId}){

const [peopleArray,setPeopleArray] = React.useState([]);
const [loaded, setLoaded] = React.useState(false);

    React.useEffect(
        () => {
          const getPeopleArr = async () => {
          
            const response = await
             fetch(`https://xxxx`);           
             const data = await response.json();  
             setPeopleArray(data);       
              
          };
          await getPeopleArr();
          setLoaded(true);
        }, []);

    return(
        <div>
            {loaded && <Person name={peopleArray[0].personalDetails.name} position={peopleArray[0].department.name}/>}  
        </div>
    );
}

Answer 4

您可以添加“？” peoperlearray [0]避免错误：

<Person name={peopleArray[0]?.personalDetails.name} position={peopleArray[0]?.department.name}/>

或者您可以使用条件渲染：

<div>
 {peopleArray[0] ? <Person name={peopleArray[0].personalDetails.name} 
 position={peopleArray[0].department.name}/> : null }    
</div>
 

Answer 5

快速修复，只是检查数组的长度：

return peopleArray.length ? <Person name={peopleArray[0].personalDetails.name} position={peopleArray[0].department.name}/> : <></>

尽管它不考虑获取结果为空数组时的情况