React中如何在setState完成后再渲染子组件？

你的核心问题是：组件第一次渲染时，names还是初始的空数组，而异步请求要等一会儿才能拿到数据并更新state，所以Seguradora一开始接收到的是空数据。下面给你几个实用的解决办法：

1. 增加加载状态，等待数据就绪后再渲染组件 #

给组件加一个加载状态变量，在请求完成前显示加载提示，数据回来后再渲染Seguradora。同时要修正useEffect的依赖数组——你之前的依赖是空数组，当路由参数obj.state._id变化时，不会重新发起请求，这会导致数据不更新，必须把obj.state._id加入依赖。

修改后的代码：

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([]);
  const [isLoading, setIsLoading] = useState(true); // 新增加载状态

  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);
      } catch (error) {
        console.log("error", error);
      } finally {
        setIsLoading(false); // 请求完成后结束加载
      }
    };

    fetchData();
  }, [obj.state._id]); // 加入依赖，确保参数变化时重新请求

  // 加载中显示提示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 数据为空时也可以加提示
  if (!names.length) {
    return <div>暂无相关数据</div>;
  }

  return (
    <div>
      <Seguradora props={names} />
    </div>
  );
};

2. 在Seguradora组件内部处理空数据 #

如果不想在父组件加判断，可以让Seguradora自己处理空数据的情况，这样父组件直接渲染就行，组件内部做兼容：

// Seguradora组件示例
function Seguradora({ props: names }) {
  // 当names为空时显示默认内容
  if (!names || names.length === 0) {
    return <div>暂无保险公司信息</div>;
  }

  // 正常渲染数据的逻辑
  return (
    <div>
      {names.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

为什么你之前的三元运算符没生效？ #

你可能写了类似{names && <Seguradora />}的代码，但空数组[]在JavaScript里是“真值”（truthy），所以这个判断会通过，组件还是会渲染。正确的判断应该是检查数组长度：{names.length > 0 && <Seguradora props={names} />}。

内容的提问来源于stack exchange，提问作者Igor Ferreira