我已经根据您的代码进行了一点重构,不确定这是否是正确的方式,但它工作得很好:
const [renderedObjects, setRenderedObjects] = useState([]);
使用 useEffect
来触发数据获取:
useEffect(() => {
getData('http://localhost:3030/pickedObjects');
}, []);
const getData = async (apiUrl) => {
const response = await fetch(apiUrl);
const json = await response.json();
setRenderedObjects(json.map(item => <ContentItem className="item" item={item} />));
};
在这个版本中,我直接在 fetch
请求的异步处理流程中使用 setRenderedObjects
来设置状态值,并且将 getData
函数内的 Promise 链改为了 async/await
语法,使得代码更加简洁易读。
然后在组件的返回部分,我这样使用 renderedObjects
:
return (
<ul className="content row">
{renderedObjects}
</ul>
);
现在,我的 setRenderedObjects
状态值直接在 fetch
数据处理过程中被设置,而且避免了对 document
的直接操作,保持了React组件的纯净性。