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

Question

我正在学习reason react，但在渲染从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。

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

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

解决方案应该和用Array.map替换List.map和删除Array.of_list一样简单，因为现在不需要这样做。

同样值得注意的是，这可能已经被类型注释阻止了，而且几乎可以肯定是使用JSON解码器。为了方便动态输入，你不得不花费大量的时间来追踪像这样的错误。