Reactjs 警告：数组或迭代器中的每个子级都应具有唯一的；“关键”；道具

G'Day。 我想迭代一组JSON对象，并将它们转换为React元素。这些对象看起来像这样

                                "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 -------------------------------------------------

//--------------------
formFields（fieldsIn）{
const fieldsOut=[]；//要返回的表单元素数组
for（var fieldIn in fieldsIn）{//JSON中表单元素描述的数组
控制台日志（fieldIn）；
让field=React.createElement（SmartRender，//去构建React元素
{key:fieldsIn[fieldIn].key，fieldIn}，
null）；//最低级别，无子级，数据在道具中
野外推送（野外）；
}
return（fieldsOut）；//此数组是每个页面的子级
}
//----------------------
页面（第页，格式）{
//我试图在JSX中实现这一点，但我所使用的语法都无法实现
//允许我在使用构建时访问childred
//BABEL transpiler。上面的方法items（）也是如此。
//
//此方法返回一个包含这些元素的页面数组
//smartForm将其视为子对象。
const pagesOut=[]；//要生成和返回的页面数组
让Section={}；//组件在生成中激发
开关（格式）{
案例“手风琴”：{
截面=一致截面；
打破
}
案例“工作流”：{
Section=null；//我还没有写这个
打破
}
案例“简单”：{
Section=null；//我还没有写这个
打破
}
}
对于（var pageIn in pagesIn）{//pages，任何格式，任何数字1..N
让children=this.formFields（pagesIn[pageIn].fields）；/1..N个字段，我们事先不知道
让page=React.createElement（第节，
pagesIn[pageIn]。道具，
儿童）；
pagesOut.push（第页）；
}
return（pagesOut）；//此数组是每个窗体的子级
}
//--------
render（）{
让formIn=this.props.form；//表单的JSON描述
let formOut=null；//构造的REACT/Javascript表单
开关（formIn.format）{//这是什么类型的操作
大小写“accordion”：{//accordion以一种形式出现，好吗
让子项=this.pages（formIn.pages，
formIn.format）；//构建子对象
formOut=React.createElement（Accordion，//在
{key:formIn.formName}，//只是一个唯一的键
子项）；//N个手风琴页面，N2个输入字段
打破
}
案例“工作流”：{
让children=this.pages（formIn.pages，//构建子对象
formIn.format）；//构建子对象
formOut=React.createElement（工作流，//并创建复杂的工作表元素
{key:formIn.formName}，
子项）；//N个滑动页面，N2个输入字段
打破
}
案例“简单”：{
让children=this.pages（formIn.pages，//构建子对象
formIn.format）；//构建子对象
formOut=React.createElement（简单，
{key:formIn.formName}，
子项）；//一页，N个输入字段
打破
}
}
返回(
智能表单解析器
"知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德如果你不自以为是，就必须为自己的行为负责。”

{formOut}
);
}
}
//-------------------------------------------------------------------------
导出默认智能表单；
//-----------------EOF-------------------------------------------------

您需要在React元素中添加一个唯一的按键道具

根据：

键

有助于识别哪些项目已更改，哪些是

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

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

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

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

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