我正在尝试 Reason-React。当我尝试向其中一个组件添加 key 时,我遇到了问题。
我有一个 TodoApp 将 TodoItem 列表作为状态。当我没有 TodoItem 的 key 时,该应用程序可以正常工作。但是,当我添加它时,我收到了编译错误。我在这里添加文件以供引用:
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
,但我无法弄清楚它是如何不受约束的。我在这里想念什么?
最佳答案
不幸的是,在根据记录字段的使用情况从另一个模块推断记录的类型时,类型推断有点有限,所以你需要给它一些帮助。应该工作的两个选项是:
注释 ì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 />)
关于ocaml - 未绑定(bind)记录字段 id 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47300762/