未绑定记录字段 ID 错误

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 />)