関数が返すオブジェクトの値をレンダリングしたいです。

Question

前提・実現したいこと

下記のサンプルは1〜3の数字の配列から、数字とその数字が偶数かを丸バツで判定したリストをレンダリングするものです。
CodeSandBoxで作成しました。
サンプル

関数が返すオブジェクトの値をレンダリングしたいです。

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

エラーは発生していませんが、各値が空の状態でレンダリングされています。

該当のソースコード

const array = [1, 2, 3];

const App = () => {
  const renderArray = array.map(num => {
    const checkEvenNum = async num => {
      const result = num % 2;
      const resultObj = await getResultObj(result);
      return resultObj;
    };

    const getResultObj = async result => {
      if (result === 0) return { check: "○", num: num };
      return { check: "×", num: num };
    };

    return (
      <li key={num}>
        <p>数字: {checkEvenNum(num).num}</p>
        <p>偶数: {checkEvenNum(num).check}</p>
      </li>
    );
  });

  return <ul>{renderArray}</ul>;
};

試したこと

関数の実行が終わる前にレンダリングされるため値が空なのかなと思い、下記のようにasync/awaitを加えました

const renderArray = array.map(async num => {
...

return (
  <li key={num}>
    <p>数字: {await checkEvenNum(num).num}</p>
    <p>偶数: {await checkEvenNum(num).check}</p>
  </li>
);

すると、下記のエラーが表示されました。

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
in ul (at App.js:26)
in App (at src/index.js:9)
in StrictMode (at src/index.js:8)

エラーメッセージをそのまま検索すると、原因はpropsの受け取りを{}で囲っていないため、という旨の記事を見つけたのですが、propsを受け取るコンポーネントが無いので、原因がわかりませんでした。

Answer 1

awaitは実はasync関数の結果を出すことではなく、そのあとのコードを変形することです。だから React JSX の HTML の部分では用いられません。

ただ希望通りレンダリングしたいのなら、asyncとawaitを全部外したら大丈夫です。

勉強のためにasync/awaitを用いたいのなら、useStateとuseEffectを使わなければならないのです。

まずはmapの中身を独立します。そうしないとuseStateとuseEffectを使えません。

const NumberDisplay = ({ num }) => {
  const checkEvenNum = async num => {
    const result = num % 2;
    const resultObj = await getResultObj(result);
    return resultObj;
  };

  const getResultObj = async result => {
    if (result === 0) return { check: "○", num: num };
    return { check: "×", num: num };
  };

  return (
    <li key={num}>
      <p>数字: {checkEvenNum(num).num}</p>
      <p>偶数: {checkEvenNum(num).check}</p>
    </li>
  );
};

const App = () => {
  const renderArray = array.map(num => {
    return <NumberDisplay num={num} />;
  });

  return <ul>{renderArray}</ul>;
};

checkEvenNum()の結果を直接使えないので、useStateを使ってstateを作ります。後でcheckEvenNum()の結果をsetStateでstateに入れます。

const NumberDisplay = ({ num }) => {
  const [state, setState] = useState({});

  const checkEvenNum = async num => {
    const result = num % 2;
    const resultObj = await getResultObj(result);
    return resultObj;
  };

  const getResultObj = async result => {
    if (result === 0) return { check: "○", num: num };
    return { check: "×", num: num };
  };

  return (
    <li key={num}>
      <p>数字: {state.num}</p>
      <p>偶数: {state.check}</p>
    </li>
  );
};

useEffectを使って、asyncのgetResultObjとcheckEvenNumを中身にして、結果をsetStateでstateに入れます。useEffectの2つ目の引数は依存リストであり、numとsetStateを中身に使うから入れます。

const NumberDisplay = ({ num }) => {
  const [state, setState] = useState({});

  useEffect(() => {
    const checkEvenNum = async num => {
      const result = num % 2;
      const resultObj = await getResultObj(result);
      return resultObj;
    };
    const getResultObj = async result => {
      if (result === 0) return { check: "○", num: num };
      return { check: "×", num: num };
    };
    const eff = async () => {
      setState(await checkEvenNum(num));
    };
    eff();
  }, [num, setState]);

  return (
    <li key={num}>
      <p>数字: {state.num}</p>
      <p>偶数: {state.check}</p>
    </li>
  );
};

最後の結果のCode Sandbox

お役に立てたら幸いです。

Comments

[evgenia]

ご回答とコードをご提供くださりありがとうございました！実装できかつ理解できました。重ねて御礼申し上げます。

Answer 2

エラーメッセージをそのまま検索すると、原因はpropsの受け取りを{}で囲っていないため、という旨の記事を見つけたのですが

違います。ReactのJSXに直接Promiseを混ぜ込んでしまったのが原因です。

各値が空の状態でレンダリングされています。

async関数の返り値はPromiseなので、返り値から直接プロパティを取得することはできません。

---

コンポーネントの中でできることは、いったんstateを立てて、Promiseがresolveした時点でsetStateを行う、ような間接的な手段しかないかと思います。

Comments

[evgenia]

ご回答いただきありがとうございます。array.map内でsetStateでオブジェクトを格納したところ、次のエラーが表示されました。Too many re-renders. React limits the number of renders to prevent an infinite loop. setStateを使用する場合のコードをご教示いただけないでしょうか。

[maisumakun]

getResultObjがコンポーネント内に置かれていますが、これは何かしらの意図があってのものでしょうか？それとも、「別に外側にあっても構わない」ものでしょうか？

[evgenia]

外側にあっても構わないものです。意図はありません。

[maisumakun]

> setStateを使用する場合のコードをご教示いただけないでしょうか。

ここで書くには長くなりすぎます。array.mapの中身を1つのコンポーネントとしてくくりだす必要があります。