问题描述:
我正在构建一个 React 组件,它从 API 获取数据并更新状态。但是,我面临渲染和状态更新的问题。
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};
return (
<div>
<h1>Data:</h1>
{data.map(item => (
<p key={item.id}>{item.name}</p>
))}
</div>
);
};
export default MyComponent;
错误信息:
没有具体的错误消息,但数据未按预期呈现,或者获取后状态未更新。
看这个,API
https://api.example.com/data
似乎不起作用。所以我修改了您的代码以使用有效的 API。
还做了一个微小的调整,以在渲染数据内容之前检查
data
的长度是否大于零。
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch("https://api.tvmaze.com/people");
const result = await response.json();
setData(result);
} catch (error) {
console.error("Error fetching data:", error);
}
};
return (
<div>
<h1>Data:</h1>
{data.length === 0
? "loading..."
: data.map((item) => <p key={item.id}>{item.name}</p>)}
</div>
);
};
export default MyComponent;