如何在 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 数组是否具有值，并且仅在其为真时才呈现子组件。

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>
  );
};