我已经使用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吗?
答案 0 :(得分:3)
您可以使用list spread syntax将项目添加到列表的前面,类似于使用JavaScript:
setResult(result => [decodedRepo, ...result]);
但是,如果您不想处理一个以上项目的可能性,则需要使用一个容器,该容器仅限于零个或一个项目。这是the option
type。在使用中,它看起来像这样:
let (result, setResult) = React.useState(() => None);
setResult(result => Some(decodedRepo));
然后,当您使用result
时,您不得不处理它可能包含或可能不包含项目的可能性:
switch (result) {
| Some(decodedRepo) => ...
| None => ...
}