在承诺之后的渲染中键入错误

Question

我正在尝试在从获取数据后使用原因反应渲染组件，但收到类型错误。这是我的代码：

GetData.re：

let get = () => Js.Promise.(
Fetch.fetch("localhost:8000/data.json")
|> then_(Fetch.Response.json)
|> resolve
);

Main.re：

let data = () =>
GetData.get()
|> Js.Promise.then_(result =>
Js.Promise.resolve(
ReactDOMRe.renderToElementWithId(
<ItemsList itemsList=result />,
"root"
)
)
)

我收到这个错误：

29 │ let data = () =>
30 │   GetData.get()
31 │   |> Js.Promise.then_(result =>
32 │        Js.Promise.resolve(
. │ ...
37 │        )
38 │      );
This has type:
(Js.Promise.t(list(Item.item))) => Js.Promise.t(unit)
But somewhere wanted:
(Js.Promise.t(Js.Promise.t(Js.Json.t))) => 'a
The incompatible parts:
Js.Promise.t(list(Item.item)) (defined as Js.Promise.t(list(Item.item)))
vs
Js.Promise.t(Js.Promise.t(Js.Json.t)) (defined as
Js.Promise.t(Js.Promise.t(Js.Json.t)))
Further expanded:
list(Item.item)
vs
Js.Promise.t(Js.Json.t) (defined as Js.Promise.t(Js.Json.t))
ninja: build stopped: subcommand failed.

我还尝试用简单的Js.log(result)替换 render 并且可以工作，我尝试检查Js.log和render的类型(将它们的调用传递给一个需要int并观察错误的函数)，它们都是unit

我的错误在哪里？ 有没有像 top-utop for Reason 这样的东西？它实际上在OCaml中有很大帮助

Answer 1

代码中有几个问题：

1. Fetch.Response.json返回一个Js.Json.t(包装在 promise 中)，指示数据类型系统不知道数据的结构，需要解码。例如，您可以使用 bs-json 来做到这一点。

2. Js.Promise.resolve采用任何值并将该值包装在Js.Promise.t中。但是，由于Js.Promise.then_已经返回了一个承诺，因此您现在有一个承诺包裹在承诺中。因此，您应该从get函数中删除|> resolve。

类型错误告诉您这两个问题(list(Item.item) vs Js.Promise.t(Js.Json.t) (defined as Js.Promise.t(Js.Json.t)))，但它不会告诉您它"出错"的地方。要缩小此类类型错误的范围，您可以注释函数和 let 绑定的类型。例如，如果您已批注get：

let get : Js.Promise.t(list(Item.item))) = ...

它会向您显示问题出在get功能中。

经验法则：不要假设，要注释。

编辑：要回答顶级/repl 问题：Reason 有一个顶级叫做rtop，但它不适用于 BuckleScript 和 JavaScript API。还有一个原因游乐场，它确实适用于BuckleScript和JS API，但无法加载外部库。