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

未绑定的记录字段ID错误

1 个答案: