Ошибка идентификатора поля несвязанной записи

Question

Я пробую Reason-React. Я сталкиваюсь с проблемой, когда пытаюсь добавить ключ к одному из компонентов.

У меня есть TodoApp, который принимает список TodoItem в качестве состояния. Приложение работает нормально, когда у меня нет ключа для TodoItem. Когда я добавляю его, я получаю ошибку компиляции. Я добавляю файлы сюда для справки:

TodoItem.re:

type item = {
  id: int,
  title: string,
  completed: bool
};

let lastId = ref(0);

let newItem = () => {
  lastId := lastId^ + 1;
  {id: lastId^, title: "Click a button", completed: false}
};

let toString = ReasonReact.stringToElement;

let component = ReasonReact.statelessComponent("TodoItem");

let make = (~item, children) => {
  ...component,
  render: (self) =>
    <div className="item">
      <input _type="checkbox" checked=(Js.Boolean.to_js_boolean(item.completed)) />
      (toString(item.title))
    </div>
};

TodoApp.re:

let toString = ReasonReact.stringToElement;

type state = {items: list(TodoItem.item)};

type action =
  | AddItem;

let component = ReasonReact.reducerComponent("TodoApp");

let currentItems = [TodoItem.{id: 0, title: "ToDo", completed: false}];

let make = (children) => {
  ...component,
  initialState: () => {items: currentItems},
  reducer: (action, {items}) =>
    switch action {
    | AddItem => ReasonReact.Update({items: [TodoItem.newItem(), ...items]})
    },
  render: ({state: {items}, reduce}) => {
    let numOfItems = List.length(items);
    <div className="app">
      <div className="title">
        (toString("What to do"))
        <button onClick=(reduce((_evt) => AddItem))> (toString("Add Something")) </button>
      </div>
      <div className="items">
        (
          ReasonReact.arrayToElement(
            Array.of_list(
              (List.map((item) => <TodoItem key=(string_of_int(item.id)) item />, items))
              /*List.map((item) => <TodoItem item />, items) This works but the above line of code with the key does not*/
            )
          )
        )
      </div>
      <div className="footer"> (toString(string_of_int(numOfItems) ++ " items")) </div>
    </div>
  }
};

Я добавил комментарий рядом со строкой, где происходит ошибка.

Ошибка читается как Unbound record field id, но я не могу понять, как это не связано. Что мне здесь не хватает?

Answer 1

Вывод типа, к сожалению, немного ограничен, когда речь идет о выводе типа записи из другого модуля на основе использования полей записи, поэтому вам необходимо оказать ему некоторую помощь. Два варианта, которые должны работать:

Аннотирующий тип ìtem:

List.map((item: TodoItem.item) => <TodoItem key=(string_of_int(item.id)) item />)

или локально открыть модуль, в котором используется поле записи:

List.map((item) => <TodoItem key=(string_of_int(item.TodoItem.id)) item />)