如何使用 Typescript 在 React 中将状态正确设置为响应输出？

Question

我是 React 的新手，我确信这是一个非常简单的解决方案。但是，我似乎无法弄清楚如何正确地将组件的状态设置为我进行的 REST 调用的响应。

这是我返回的响应对象格式

export interface CoinMarketChartsAll {
   oneDay: Array<CoinChartDataMapped>;
   sevenDay: Array<CoinChartDataMapped>;
   oneMonth: Array<CoinChartDataMapped>;
}

这是我的功能组件，我在其中获取此数据并尝试将状态设置为等于它

const [loading, setLoading] = useState(true);
const [cryptoData, setCryptoData] = useState<CoinMarketChartsAll>();

useEffect(() => {
    fetchMarketChart();
}, []);

const fetchMarketChart = async () => {
    setLoading(true);
    if (!cryptoData) {
        getCoinMarketChart('lgcy-network').then((response) => {
            setCryptoData(response);
            setLoading(false);
        })
            .catch((error) => {
                console.log(error);
                setLoading(false);
            });
    }
}

我尝试在 if 语句中记录输出，但 cryptoData 始终等于未定义。直到我将 if 语句切换为

if (cryptoData) {

然后它会将它加载到状态中，但是当我重新加载页面时它永远不会进入 if 语句。谁能指出我做错了什么？谢谢！

Answer 1

I tried logging the output inside the if statement and cryptoData was always equal to undefined.

这仅仅是因为状态 setter 在“tick”后生效：你可以做 setCryptoData(true)，但是 cryptoData 将保持 undefined 直到下一个 tick .

when I reloaded the page it would never make it into the if statement

当您第一次更改 if 条件时，React 热模块交换启动并更新您的组件，同时保留其当前状态，因此您的 cryptoData 状态已经是真实的。

但是在页面重新加载后，您会得到一个“全新的”组件实例，它以全新初始化的状态开始，即具有 undefined 值，因为您定义它时没有初始值 (useState<CoinMarketChartsAll>(/* no initial value */) )

如何使用 Typescript 在 React 中将状态正确设置为响应输出？

How do I properly set the state to a response output in React using Typescript?

typescript

reactjs

react-hooks