未捕获(在promise中)错误:渲染的钩子比上一次渲染时多

Question

在此处输入图像描述我正在使用use效果挂钩来使用获取api，但它不起作用。当只有一个api时，它可以正常工作，但当我使用另一个api使用createData函数中的use效果挂钩获取数据时，它会出错。

我做了一些研究，我认为这是因为react中的组件重新渲染引起的一些问题，我试图搜索修复，但没有找到它，所以我发布它，如果有任何问题，请在评论中问我，我会给出更多的细节。

export default function Unpaid({ transporterId, getFn }) {
  const [itemData, setItemData] = useState([]);
  const [resData, setResData] = useState([]);


  const idUrl =
    "https://url...";

  useEffect(() => {
    let mounted = true;

    fetch(idUrl)
      .then((data) => data.json())
      .then((data) => setResData(data));

    return () => (mounted = false);
  }, []);

  console.log(resData, "response data");

  const dispatchId = resData.map((item) => item.id);
  console.log(dispatchId, "dispatch id");

  function createData(
    po,
    id
  ) {
    useEffect(() => {
      fetch(
        "https://url+id"
      )
        .then((data) => data.json())
        .then((data) => setItemData(data));
    }, []);

    console.log(itemData, "yohohoho");

    return {
      po,
    };
  }

  function Row(props) {
    const { row } = props;
    const [open, setOpen] = React.useState(false);

    return (
     <>
       jsx content
     </>
    );
  }


  const rows = resData.map((item) =>
    createData(
      item.purchase_order_details.po_number &&
        item.purchase_order_details.po_number.length > 0
        ? item.purchase_order_details.po_number
        : "NA",
     
      item.id
    )
  );
 
  return (
   <>
     jsx content
   </>
  );
}

Answer 1

通过在resData.map（...）中调用createData，您在循环中调用useEffects，这违反了钩子的规则。您只能在顶层调用钩子。

若要解决此问题，应将效果从 createData 外部移动到顶层，将依赖项 resData 添加到 ，并在效果内循环使用 resData。