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]]]，每个数组（cons-cell）包含一个元素和一个指向下一个单元格的指针，或者0作为终止符。

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

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

还值得注意的是，使用类型批注可以防止这种情况的发生，并且几乎可以肯定地使用JSON解码器可以避免这种情况。必须花时间来跟踪此类错误，这是为方便动态键入而付出的代价。

JSON的原因反应渲染项目列表

1 个答案: