我可以在 useState 中调用函数并使用其数据吗

Question

我试图从服务器获取一个对象，然后在另一个函数中使用该对象的变量，以便我可以将它们渲染出来。这是学校的 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 来获取对象，这样我就可以使用它的数据。

Answer 1

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;