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

Question

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了解更多关于错误边界的信息。

Answer 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>

Answer 2

在组件内部调用API是一种副作用，React不希望出现这种情况。React组件希望您提供数据并立即呈现该数据。如果希望在呈现组件之前调用API，请使用useEffect()之类的副作用方法，并在lambda中调用该API。组件现在知道有预期的副作用，一旦数据更新，它就会重新呈现。