경고 : 배열 또는 반복기의 각 자식에는 고유 한 "키"소문이 있어야합니다.

Question

G'Day. 많은 JSON 객체를 반복하고이를 React Elements로 바꾸고 싶습니다. 이러한 객체는 다음과 같습니다.

       "fields": 
            [ 
             { 
              key: "testname", 
              "name": "testname", 
              "altName": "", 
              "visible": true, 
              "groupVisibility": "public", 
              "type": "text", 
              "component": "input", 
              "label": "Test Smart Input", 
              "placeholder": "Some default Value", 
              "required": "required", 
              "validated": false, 
              "data": [] 
             }, 
             { 
              key: "password", 
              "name": "password", 
              "altName": "", 
              "visible": true, 
              "groupVisibility": "public", 
              "type": "password", 
              "component": "input", 
              "label": "Test Smart Input", 
              "placeholder": "Password", 
              "required": "required", 
              "validated": false, 
              "data": [] 
             } 
            ] 

그리고 반복되는 코드는 매우 간단합니다. 이러한 :

//-------------------- 
formFields(fieldsIn) { 


    const fieldsOut = [];           // ARRAY of FORM ELEMENTS to return 
    console.log('doin fields'); 
    for (var fieldIn in fieldsIn) {         // array of FORM ELEMENT descriptions in JSON 
     console.log(fieldIn); 
     let field = React.createElement(SmartRender,    // go build the React Element 
             fieldIn, 
             null);      // lowest level, no children, data is in props  
     console.log('doin fields inside'); 
     fieldsOut.push(field); 
    } 
    return(fieldsOut);            // this ARRAY is the children of each PAGE 
} 

그리고 오류 경고를 얻을 : 배열 또는 반복자의 각 아동이 고유의 "키"소품이 있어야합니다. 힌트가 있습니까? 건배

코드를 변경했습니다.

//-------------------- 
formFields(fieldsIn) { 


    const fieldsOut = [];           // ARRAY of FORM ELEMENTS to return 
    console.log('doin fields'); 
    for (var fieldIn in fieldsIn) {         // array of FORM ELEMENT descriptions in JSON 
     console.log(fieldIn); 
     let field = React.createElement(SmartRender,    // go build the React Element 
             {key: fieldsIn[fieldIn].name, fieldIn}, 
             null);      // lowest level, no children, data is in props  
     console.log('doin fields inside'); 
     fieldsOut.push(field); 
    } 
    return(fieldsOut);            // this ARRAY is the children of each PAGE 
} 

그리고 같은 오류가 발생합니다. 왜 그런지 모르겠다! 수정 됨! 도와 주셔서 감사합니다.

다음은 코드입니다.

//-------------------- 
    formFields(fieldsIn) { 


     const fieldsOut = [];           // ARRAY of FORM ELEMENTS to return 
     for (var fieldIn in fieldsIn) {         // array of FORM ELEMENT descriptions in JSON 
      console.log(fieldIn); 
      let field = React.createElement(SmartRender,    // go build the React Element 
              {key: fieldsIn[fieldIn].key, fieldIn}, 
              null);      // lowest level, no children, data is in props  
      fieldsOut.push(field); 
     } 
     return(fieldsOut);            // this ARRAY is the children of each PAGE 
    } 


    //---------------------- 
    pages(pagesIn, format) { 

     // I tried to do this in JSX, but no syntax I wrestled with would 
     // allow me to access the childred when building this with the 
     // BABEL transpiler. Same goes for the METHOD just above, items(). 
     // 
     // This method returns an array of pages this are React elements 
     // this are treated as children by the smartForm. 

     const pagesOut = [];           // array of pages to build and return 
     let Section = {};            // Component to fire in the build 
     switch(format) { 
      case 'accordion': { 
       Section = AccordionSection; 
       break; 
      } 
      case 'workflow': { 
       Section = null;           // I haven't written this yet 
       break; 
      } 
      case 'simple': { 
       Section = null;           // I haven't written this yet 
       break; 
      } 
     } 

     for (var pageIn in pagesIn) {         // pages, any format, any number 1..N 
      let children = this.formFields(pagesIn[pageIn].fields);  // 1..N fields, we don't know beforehand 
      let page = React.createElement(Section, 
              pagesIn[pageIn].props, 
              children); 
      pagesOut.push(page); 
     } 
     return(pagesOut);            // this ARRAY is the children of each FORM 
    } 



    //-------- 
    render() { 

     let formIn = this.props.form;         // JSON description of FORM 
     let formOut = null;            // contructed REACT/Javascript form 


     switch (formIn.format) {          // what type of operation is this 
      case 'accordion': {           // Accordion in a FORM, OK 
       let children = this.pages(formIn.pages, 
              formIn.format);    // build the children 
       formOut = React.createElement(Accordion,    // construct the parent with ALL nested CHILDREN after 
              {key: formIn.formName},  // just a unique key 
              children);     // N ACCORDION pages, N2 input fields 
       break; 
      } 
      case 'workflow': { 
       let children = this.pages(formIn.pages,     // build the children 
              formIn.format);    // build the children 
       formOut = React.createElement(Workflow,     // and create the complex sheet element 
              { key: formIn.formName}, 
              children);     // N SLIDING pages, N2 input fields 
       break; 
      } 
      case 'simple': { 
       let children = this.pages(formIn.pages,     // build the children 
              formIn.format);    // build the children 
       formOut = React.createElement(Simple, 
              { key: formIn.formName}, 
              children);     // One page, N input fields 
      break; 
      } 
     } 

     return(
       <div> 
        <h2>SmartForm Parser</h2> 
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
        {formOut} 
       </div> 
     ); 
    } 
} 
//------------------------------------------------------------------------- 
export default SmartForm; 

//----------------- EOF ------------------------------------------------- 

Answer 1

React 요소에 고유 한 키를 추가해야합니다. React docs에 따르면

:

Keys 도움이 변경되는 항목을 식별 반작용 추가 또는 가 제거됩니다. 배열 내 요소에 키를 지정하여 요소를 안정적인 ID로 지정해야합니다.

키를 선택하는 가장 좋은 방법은 그 형제 중 목록 항목을 고유하게 식별하는 문자열을 사용하는 것입니다. 당신이 렌더링 된 항목에 대한 안정적인 ID를 가지고 있지 않은 경우는 대부분의 경우 당신은 최후의 수단

당신이 할 수있는 열쇠로 항목 인덱스를 사용할 수 있습니다, 키

로 데이터에서 ID를 사용합니다 do do like

for (var fieldIn in fieldsIn) {         // array of FORM ELEMENT descriptions in JSON 
     console.log(fieldIn); 
     let field = React.createElement(SmartRender,    // go build the React Element 
             {key: fieldsIn[fieldIn].key, fieldIn}, 
             null);      // lowest level, no children, data is in props  
     console.log('doin fields inside'); 
     fieldsOut.push(field); 
    } 

키가 필요한 이유는 무엇입니까?

기본적으로 DOM 노드의 하위 노드에서 반복 할 때 React는 동시에 두 어린이 목록을 반복하고 차이가있을 때마다 변형을 생성합니다. 예를 들어

,이 두 나무 사이의 변환 아이들의 끝에 요소를 추가 할 때하는 것은 잘 작동 :

이

<ul> 
    <li>first</li> 
    <li>second</li> 
</ul> 

<ul> 
    <li>first</li> 
    <li>second</li> 
    <li>third</li> 
</ul> 

삽입 한 후 두 <li>second</li> 나무 일치, 두 <li>first</li> 나무 일치 할 것이다 반작용 <li>third</li> 트리.

순진하게 구현하면 처음에 요소를 삽입하면 성능이 떨어집니다. 예를 들어,이 두 트리 사이의 변환은 제대로 작동하지 않습니다.

<ul> 
    <li>first</li> 
    <li>second</li> 
</ul> 

<ul> 
    <li>third</li> 
    <li>first</li> 
    <li>second</li> 
</ul> 

키가 유용합니다.