typescript - 如何使用 Typescript 将状态正确设置为 React 中的响应输出?

我是 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 语句。谁能指出我做错了什么?谢谢!

回答1

我尝试在 if 语句中记录输出,但 cryptoData 始终等于 undefined。

这仅仅是因为状态设置器在“tick”之后生效:您可以执行 setCryptoData(true),但 cryptoData 将保持 undefined 直到下一个 tick。

当我重新加载页面时,它永远不会进入 if 语句

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

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

相似文章

最新文章