我在 useEffect 钩子中有 fetch 方法：
export const CardDetails = () => {
const [ card, getCardDetails ] = useState();
const { id } = useParams();
useEffect(() => {
fetch(`http://localhost:3001/cards/${id}`)
.then((res) => res.json())
.then((data) => getCardDetails(data))
}, [id])
return (
<DetailsRow data={card} />
)
}
但是在DetailsRow组件内部这个数据没有定义，这意味着我在获取数据之前渲染了这个组件。如何正确解决？
只是不要在数据为时渲染它undefined：
export const CardDetails = () => {
const [card, setCard] = useState();
const { id } = useParams();
useEffect(() => {
fetch(`http://localhost:3001/cards/${id}`)
.then((res) => res.json())
.then((data) => setCard(data));
}, [id]);
if (card === undefined) {
return <>Still loading...</>;
}
return <DetailsRow data={card} />;
};
如果还没有任何数据，有 3 种方法可以不渲染组件。
{data && <Component data={data} />}if(!data) { return null }渲染前检查。此方法将阻止所有组件渲染，直到没有任何数据。<Loading />在 JSX 中使用一些组件和三元运算符。在这种情况下，您将能够呈现不需要数据的组件的所有其他部分 ->{data ? <Component data={data} /> : <Loading>}试试这个：
export const CardDetails = () => { const [ card, getCardDetails ] = useState(); const { id } = useParams(); useEffect(() => { if (!data) {fetch(`http://localhost:3001/cards/${id}`) .then((res) => res.json()) .then((data) => getCardDetails(data))} }, [id,data]) return (<div>{data && <DetailsRow data={card} />} {!data&&<p>loading...</p>}</div>) }