Unbound Datensatz Feld ID Fehler

Question

Ich versuche Reason-React. Ich stehe vor einem Problem, wenn ich versuche, einer Komponente einen Schlüssel hinzuzufügen.

Ich habe eine TodoApp, die eine Liste von TodoItem als Status nimmt. Die App funktioniert einwandfrei, wenn ich keinen Schlüssel für das TodoItem habe. Wenn ich es hinzufüge, erhalte ich jedoch einen Kompilierungsfehler. Ich füge die Dateien hier als Referenz:

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> 
    } 
}; 

Ich habe einen Kommentar in der Nähe der Linie hinzugefügt haben, wo der Fehler auftritt. Der Fehler lautet Unbound record field id, aber ich bin nicht in der Lage, herauszufinden, wie es nicht gebunden ist. Was fehlt mir hier?

Answer 1

Typ-Inferenz ist leider ein wenig begrenzt, wenn es darum geht, den Typ eines Datensatzes aus einem anderen Modul basierend auf der Verwendung von Datensatzfeldern abzuleiten, also müssen Sie ihm etwas helfen. Zwei Optionen, die funktionieren sollen, sind:

mit Anmerkungen versehen, die Art von ìtem:

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

oder lokal um das Modul zu öffnen, wo das Datensatzfeld verwendet wird:

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