非同期処理　React

前提

React、サーバーサイドにNode.js、データベースにMongodbを使用してTodoアプリを作成しています。

実現したいこと

データベースの内容とは異なり、固定のメッセージを表示する場合は実装できました。データベースの中身を取得して、動的に一覧表示をできるようにしたいのですが非同期処理関連で問題があります。

発生している問題・エラーメッセージ

・非同期処理で得たデータをuseStateでセットしても反映されない
・useStateを用いず、適当な変数に収めて値を確認してからpropsとしてデータを渡しListView.jsxからList.jsxを呼び出そうとしているがコンポーネントを非同期にするとエラーが出て動かない

該当のソースコード

・非同期処理で得たデータをuseStateでセットしても反映されない
ListView.jsx

const ListView = async () => {
    const [tasks, setTasks ] = useState([]);

    const allTasks = await showTasks();
    console.log(allTasks); =>(結果：{allTasks: Array(2)} 取れてる)
　 setTasks(allTasks);
    console.log(tasks); =>(結果： [] 取れない)

    return (
        <div className="list_container">
            <div className="tasks">
                <List tasks={tasks}></List>
            </div>
        </div>
    );
};

・useStateを用いず、適当な変数に収めて値を確認してからpropsとしてデータを渡しListView.jsxからList.jsxを呼び出そうとしているがコンポーネントを非同期にするとエラーが出て動かない(非同期処理をなくして適当な配列を渡したら動く)
エラー内容

react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:14887:1)
    at reconcileChildFibers (react-dom.development.js:15828:1)
    at reconcileChildren (react-dom.development.js:19167:1)
    at mountIndeterminateComponent (react-dom.development.js:20157:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)

行動規範の内容に同意します

回答2件

自己解決

戻り値をreturnせずに直接useStateのStateにsetする

非同期処理関数をreturnするとPromise型になるので、同一コンポーネント内のuseEffect内に非同期処理関数を定義し
取得した値を関数内で直接setTasks(allTasks);とすることで動作するようになりました。

投稿2023/01/09 06:33

nosuke09

総合スコア9

js
1    console.log(allTasks); =>(結果：{allTasks: Array(2)} 取れてる)
2　 setTasks(allTasks);
3    console.log(tasks); =>(結果： [] 取れない)

stateへの反映処理自体が非同期実行ですので、set直後のconsole.log(tasks);では結果が反映されていなくて問題ありません。

コンポーネントを非同期にするとエラーが出て動かない

はい、関数コンポーネントにasyncと書いた関数を使うことはできません。コンポーネント直下にawaitを書かず、useEffectなどで処理を行ってください。

投稿2023/01/08 07:27

maisumakun

総合スコア145183

nosuke09

2023/01/08 11:24

showTasksが非同期処理でgetリクエストをしてデータを取ってきている関数なのですが、これをuseEffect内で処理しろということでしょうか? ``` useEffect(() => { console.log("副作用関数が実行されました。"); setTasks(showTasks()); }) ``` こちらで処理したところ、Listコンポーネントにpropsとして受け取った値を表示してみるとPromise型になっており、値が扱えません。showTasksは非同期で実装しています。