如何在React中呈现setState之后的组件

Question

我知道这是一个常见的问题，但经过数小时的搜索，我决定寻求帮助。

我试图将一个状态变量传递给一个组件，但该组件在设置值之前就已经呈现了

我的代码：

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import Seguradora from "../../components/seguradora/seguradora.component";
const CorretorasShow = () => {
const obj = useLocation();
const [names, setNames] = useState([]);
useEffect(() => {
const url =
"http://localhost:3001/corretoras/63338f415c502044e953d408" +
obj.state._id;
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
setNames(json.seguradora); // <<<<<< setState
} catch (error) {
console.log("error", error);
}
};
fetchData();
}, []);
return (
<div>
<Seguradora props={names} /> //<<<<< state varible
</div>
);
};

我尝试过useMemo、useRef和三元运算符，但都没有用。我不是一个专业的程序员，我是reactJS的新手，所以我可能在的这些解决方案上做了一些错误

Answer 1

由于names是一个数组，您可以检查数组是否被填充以有条件地渲染组件，如下所示：

return (
<div>
{ names.length > 0 ?  <Seguradora props={names} /> : null} 
</div>
);

Answer 2

由于获取数据是异步操作，因此在呈现子组件时，所获取的数据(在本例中为names(将是未定义的。为了避免这种情况，您需要检查names数组是否有值，并且仅当值为true时才渲染子组件。

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
import Seguradora from "../../components/seguradora/seguradora.component";
const CorretorasShow = () => {
const obj = useLocation();
const [names, setNames] = useState([]);
useEffect(() => {
const url =
"http://localhost:3001/corretoras/63338f415c502044e953d408" +
obj.state._id;
const fetchData = async () => {
try {
const response = await fetch(url);
const json = await response.json();
setNames(json.seguradora); // <<<<<< setState
} catch (error) {
console.log("error", error);
}
};
fetchData();
}, []);
return (
<div>
{ names.length !== 0 && <Seguradora props={names} /> }
</div>
);
};