我试图从服务器获取一个对象,然后在另一个函数中使用该对象的变量,以便我可以将它们渲染出来。这是学校的 React 项目。在以前的版本中,我可以在最终函数中获取对象,但无法访问对象中的点。
async function getAMZN() { //Can I make this proccess hit without needeing a full refresh
try {
const response = await fetch("http://127.0.0.1:31324/AMZN", {mode:"no-cors"});
if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error(`Could not get data: ${error}`);
}
}
async function AMZNuseState(){
const [AMZN, changeAMZN] = React.useState([getAMZN()])
return (
<span>
<h1>AMZN</h1>
<p>Price: {AMZN.price} </p>
<p>Volume: {AMZN.volume} </p>
<p>Last Five: </p>
</span>
)
};
我有几个版本。使用 useState 似乎最有希望,但显然它不太有效。理论上, getAMZN() 返回一个包含股票价格和交易量的对象。该功能在其他版本中也适用。 AMZNuseState() 将使用 useState 来获取对象,这样我就可以使用它的数据。
getAMZN
是一个异步函数,它返回Promise
,如果你将它作为useState
的参数传递,你只需将初始值设置为Promise
,你需要使用useEffect
来调用getAMZN
并使用 then
函数(将在 Promise 解析后执行),将结果传递给 setAMZN
import React, { useState, useEffect } from 'react';
async function getAMZN() {
try {
const response = await fetch("http://127.0.0.1:31324/AMZN", { mode: "no-cors" });
if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error(`Could not get data: ${error}`);
}
}
function AMZNuseState() {
const [AMZN, setAMZN] = useState({ price: 0, volume: 0 }); // Initialize with default values
useEffect(() => {
getAMZN().then(data => {
if (data) {
setAMZN(data);
}
});
}, []);
return (
<span>
<h1>AMZN</h1>
<p>Price: {AMZN.price}</p>
<p>Volume: {AMZN.volume}</p>
<p>Last Five: </p>
</span>
);
};
export default AMZNuseState;