3

我正在尝试 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，但我无法弄清楚它是如何不受约束的。我在这里想念什么？

4

1 回答 1

7

不幸的是，在根据记录字段的使用情况从另一个模块推断记录的类型时，类型推断有点受限，所以你需要给它一些帮助。应该工作的两个选项是：

注释的类型ì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 />)
于 2017-11-15T06:33:27.337 回答