index.js：2178警告：数组或迭代器中的每个子代都应具有唯一的“键”属性。 -reactjs

Question

import React from 'react';
import { Jumbotron, Button } from 'reactstrap';
import axios from 'axios';
import './App.css'


 export default class Form extends React.Component{
constructor(){
super();
this.state={

    fname:'',
    lname:''
};
}
handleChange = event => {
    this.setState({name:event.target.value});;
}

handleSubmit = event =>{
    event.preventDefault();

    const fname = this.state;
    const lname = this.state;

    axios.post('http://37692ae9.ngrok.io/api/addDocs',{fname,lname})
    .then( res => {
        console.log(res);
        console.log(res.data);
    })
    .catch((error) =>{
        alert(error);
    })
}

render(){
    return(
        <div>
        <div className="container">
            <Jumbotron fluid>
                <form onSubmit={this.handleSubmit}>
                <label>
                    firstName:
                    <input type="text" name="fname" onChange={this.handleChange} />
                    </label>
                    <label>
                    lastName:
                    <input type="text" name="lname" onChange={this.handleChange} />
                    </label>
                    <Button type="submit">add</Button>
                    </form>
                    </Jumbotron>
                    </div>

                </div>
    )
}
 }

每当我尝试发送不成功的邮件时，请帮助我使用axios在网址中发布这两个数据。

该错误是警告：数组或迭代器中的每个子代都应具有唯一的“键”道具。

我对reactjs很陌生，所以请帮助我解决这个问题并使我的代码执行

Answer 1

当您遍历数组并为React中的每个元素渲染某些内容时，您需要为每个元素分配一个'key'属性。 这有助于React的虚拟DOM跟踪发生的更改。 幸运的是，这是一个非常简单的任务。

假设您有一个名称数组： const names = ['tom', 'jerry', 'frank', 'lilly']

要遍历这些变量并为每个名称呈现一个段落标签，而无需React抱怨，您可以在组件的return方法中执行此操作：

return (
 {
   names.map((name, index) => <p key={index}>{name}</p>
 }
)

您为列表中要渲染的每个元素创建一个键。 只要是唯一的，它就可以。 因此，如果您愿意，可以将名称作为关键字，但是如果数组中有重复的值，则可能不是一个好习惯。

Answer 2

它帮助我

{
    items.map((post, index)  => (
        <PostItem key={index} {...post} />
    ))
}