2

我正在学习理性反应，并且无法呈现我从 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这意味着我收到的对象与我尝试渲染的对象之间存在差异。

4

1 回答 1

3

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

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

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

解决方案应该像替换和删除一样简单，List.map因为Array.map现在Array.of_list没有必要了。

还值得注意的是，类型注释可能已经阻止了这种情况，而且几乎可以肯定的是 JSON 解码器。不得不花时间努力追踪以发现这样的错误是您为方便动态键入所付出的代价。

于 2019-08-04T11:15:12.067 回答