1

私は長い間 React を使用しており、Reason React にチャンスを与えたいと考えています。次に、Github リポジトリからデータをフェッチして結果を表示する小さなプロジェクトを作成しました。

React Hooks を使用して、結果を状態に保存したいと考えています。

これが私がやろうとしていることです:

type githubRepo = {
  name: string,
  url: string,
};

module Decode = {
  let repo = (repo): githubRepo =>
    Json.Decode.{
      name: repo |> field("name", string),
      url: repo |> field("url", string),
    };
};

let useFetch = (~url: string, ~options=?, ()) => {
  let (loading, setLoading) = React.useState(() => true);
  let (result, setResult) = React.useState(() => []);

  React.useEffect1(
    () => {
      ignore(
        Js.Promise.(
          Fetch.fetch(url)
          |> then_(Fetch.Response.json)
          |> then_(json =>
               json
               |> Decode.repo
               |> (
                 decodedRepo => {
                   Js.log(decodedRepo);
                   setResult(result => decodedRepo);
                   setLoading(_ => false);
                   Some(decodedRepo);
                 }
               )
               |> resolve
             )
          |> catch(_err => resolve(None))
        ),
      );

      None;
    },
    [||],
  );

  (loading, result);
};

やろうとするとsetResult(_ => decodedRepo)エラーになる

これにはタイプがあります: githubRepo しかし、どこかが欲しかった: list('a)

React.useState を空のリストに初期化したことは知っていますが、decodedRepo内部を設定する方法がわかりません。

の結果は次のJs.log(decodedRepo)とおりです。

Array [ "Node.js", "https://api.github.com/orgs/nodejs" ]
  0: "Node.js"
  1: "https://api.github.com/orgs/nodejs"
  length: 2

値なしで useState を初期化する方法があるかどうかも知りたいですか?

4

1 に答える 1