此代码未显示编译错误，但控制台不会呈现答案

【问题标题】：This code doesn't show a compile error, but the console won't render此代码未显示编译错误，但控制台不会呈现
【发布时间】：2021-10-28 08:19:58
【问题描述】：

import React from 'react';

const url = 'https://randomuser.me/api/?results=10'

async function List() {

    const data = await fetch (url)
    const response = await data.json()

    return (
        <div>
            {response.map((item)=>(
            <div>{item.results[1].name.first}</div>
            ))}
        </div>
        
    )
}

它还会抛出这个：组件中发生了上述错误：

at List
at div
at App

考虑在树中添加错误边界以自定义错误处理行为。请访问https://reactjs.org/link/error-boundaries 了解有关错误边界的更多信息。

【问题讨论】：

阅读有关在 react 中发出 http 请求的文档
“上述错误” - 你能告诉我们这个错误吗？
已经解决了，非常感谢老哥。

标签： javascript reactjs api

【解决方案1】：

如果您使用 functional 组件。您需要使用 React hooks 进行 API 调用。您可以使用useEffect 钩子来调用API。

示例：

const { useState } = React;

function useFetchData() {

  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    return fetch("https://randomuser.me/api/?results=10")
      .then((response) => response.json())
      .then((responseJson) => {
        setData(responseJson.results);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return { data };
}

function App() {

  const { data } = useFetchData();

  return (
    <div id="quote-box">
      {data.map((item) => (
        <div>{item.name.first}</div>
      ))}
    </div>
  );

}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：

谢谢你，真的很有帮助。

【解决方案2】：

在组件内部调用 API 是一种副作用，React 不希望这样。 React 组件希望您提供数据并立即呈现该数据。如果您想在渲染组件之前调用 API，请使用像 useEffect() 这样的副作用方法并在 lambda 中调用该 API。该组件现在知道存在预期的副作用，并且会在数据更新后重新渲染。

【讨论】：

我使用了 useEffect 和 UseState Hook，然后是 IIFE，它工作了。谢谢大佬