언 바운드 레코드 필드 id 오류

Question

나는 Reason-React를 시험 중이다. 구성 요소 중 하나에 키를 추가하려고하면 문제가 발생합니다.

나는 TodoItem의 목록을 상태로 취하는 TodoApp를 보유하고 있습니다. 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

유추 유형은 레코드 필드의 사용법에 따라 다른 모듈에서 레코드 유형을 추론 할 때 다소 제한적이므로 불필요한 도움이 필요합니다. 작동해야 두 가지 옵션은 다음과 같습니다 레코드 필드가 사용되는 모듈을 열고 로컬

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

나 :

이 ìtem의 유형을 주석

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