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中的每个元素渲染一些东西时，你需要分配一个＆＃39;键＆＃39;每个元素的属性。这有助于React的虚拟DOM跟踪发生的变化。幸运的是，这是一项非常简单的任务。

假设您有一系列名称： const names = ['tom', 'jerry', 'frank', 'lilly']

迭代这些并为每个名称呈现一个段落标记，而没有React抱怨你会在你的组件的return方法中执行此操作：

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

您为列表中呈现的每个元素创建一个键。它可以是任何东西，只要它是独一无二的。因此，如果您愿意，可以将名称作为键，但如果您的数组中有重复值，则可能不是一个好习惯。

index.js：2178警告：数组或迭代器中的每个子节点都应该有一个唯一的“key”prop。 - reactjs

1 个答案: