来自 json 的项目的 Reason-react 呈现列表

Question

我正在学习理性反应，但无法呈现我从 json api 中获取的项目列表。

let url = region => {
  "https://api.openbrewerydb.org/breweries?by_state="
  ++ Js.String.replaceByRe([%re "/\s/g"], "_", String.lowercase(region));
};

[@react.component]
let make = (~region) => {
  let (breweries, setBreweries) = React.useState(() => []);

  React.useEffect1(
    () => {
      Js.Promise.(
        Axios.get(url(region))
        |> then_(response => {
             resolve(setBreweries(response##data));
           })
      );
      None;
    },
    [|region|],
  );

  let renderBrewery = brw => <div> {ReasonReact.string(brw##name)} </div>;

  <div>
    {breweries |> List.map(renderBrewery) |> Array.of_list |> React.array}
  </div>;
};

我正在取回 then_ 块中预期的数据。但是，当项目被呈现时，我收到一个 JS 错误，说 TypeError: brw is undefined 意味着某处我收到的对象和我试图呈现的对象之间存在差异。

Answer 1

问题是（几乎可以肯定）您在数组上使用 List.map。

列表和数组不一样。数组 [|1, 2, 3|] 将表示为 JavaScript 中的普通数组，但列表 [1, 2, 3] 将表示为嵌套的二元素数组 [1, [2, [3, 0]]] ，每个数组（缺点-cell) 包含一个元素和指向下一个单元格的指针，或 0 作为终止符。

List.map 将继续迭代，直到它遇到 0 作为单元格的第二个元素，当然它永远不会遇到。相反，它会继续迭代垃圾数据，直到崩溃。

解决方案应该很简单，只需将 List.map 替换为 Array.map 并删除 Array.of_list，因为现在不需要了。

同样值得注意的是，这可能已经被类型注释阻止了，而且几乎可以肯定是 JSON 解码器。必须花时间追踪很难捕捉到这样的错误，这是您为动态类型的便利付出的代价。

来自 json 的项目的 Reason-react 呈现列表

Reason-react rendering list of items from json

reason

bucklescript

reason-react