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_ブロックで期待するデータを取得しています。ただし、アイテムがレンダリングされるとTypeError: brw is undefined、受け取ったオブジェクトとレンダリングしようとしているオブジェクトの間に不一致があることを意味する JS エラーが表示されます。

4

1 に答える 1