React useState 非同期问题を解決する方法を教えてください

2年 ago
陽, 向宇
1 minute

React の useState フックは同期処理で、非同期処理を自動でハンドリングしません。したがって、useState の後に非同期処理を実行する必要がある場合は、次のように解決できます。

  1. useEffectフックを使用すると、非同期処理を実行し、処理が完了した後に状態を更新できます。例を次に示します。
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
// 异步操作
fetchData().then(result => {
setData(result);
});
}, []); // 空依赖数组表示只在组件挂载时执行一次
return <div>{data}</div>;
}
  1. カスタムフックを使う：非同期処理をカスタムフックにカプセル化し、状態を返して必要なときに呼び出す。たとえば、
import React, { useState, useEffect } from 'react';
function useAsyncData() {
const [data, setData] = useState(null);
useEffect(() => {
// 异步操作
fetchData().then(result => {
setData(result);
});
}, []);
return data;
}
function MyComponent() {
const data = useAsyncData();
return <div>{data}</div>;
}
  1. 複雑な非同期処理を扱う必要があるなら、Reduxのようなステート管理ライブラリを利用するのがよいだろう。この種のライブラリはたいてい非同期処理を処理する仕組みを提供していて、ステートや非同期処理をより簡単に管理できるようになる。

具体的な状況に応じて React の useState の非同期問題を解決するための適切なアプローチを選択してください。

bannerAds