ReasonReact 使用获取数据的状态

Question

我已经使用 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？

Answer 1

您可以使用列表扩展语法将项目附加到列表中，类似于在 JavaScript 中的方式：

setResult(result => [decodedRepo, ...result]);

但是，如果您不想处理多个项目的可能性，则需要使用限制为零个或仅一个项目的容器。这是option类型。在使用中，它看起来像这样：

let (result, setResult) = React.useState(() => None);
setResult(result => Some(decodedRepo));

然后，当您使用result时，您被迫处理它可能包含也可能不包含项目的可能性：

switch (result) {
| Some(decodedRepo) => ...
| None => ...
}