反应-数组或迭代器中的每个子代都应具有唯一的“键".支柱 [英] React - Each child in an array or iterator should have a unique "key" prop
本文介绍了反应-数组或迭代器中的每个子代都应具有唯一的“键".支柱的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对React JS组件中的关键道具有疑问.
I have a problem with the key props in a React JS component.
我要
警告:数组或迭代器中的每个子代均应具有唯一的键"道具.检查登录的渲染方法.它是从App传来的一个孩子.
在控制台日志中发出警告.应用程序组件如下:
warning in console log. App component is as follows :
import React from 'react';
import Header from '../common/header';
import HeaderCompact from '../common/headerCompact';
import Footer from '../common/footer';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
lang: 1
};
}
changeLang(name, event) {
event.preventDefault();
switch (name) {
case "fra" :
this.setState({lang: 2});
break;
case "ger" :
this.setState({lang: 3});
break;
case "ned" :
this.setState({lang: 4});
break;
default:
this.setState({lang: 1});
}
}
render() {
let currentRoute = this.props.location.pathname.slice(1);
let header = currentRoute === "" ? <Header onClick={this.changeLang} lang={this.state.lang}/> :
<HeaderCompact currentRoute={currentRoute} onClick={this.changeLang} lang={this.state.lang}/>;
return (
<div>
{header}
{React.cloneElement(this.props.children, {lang: this.state.lang})}
<Footer lang={this.state.lang}/>
</div>
);
}
}
export default App;
我的登录组件如下:
import React from 'react';
import LoginForm from './loginForm';
const Login = ({currentLanguage}) => {
const language = currentLanguage;
return (
<div className="container">
<div className="row">
<p className="col-lg-4 col-xs-12 col-md-4 loginTitle noPadding">{language.loginTitle}</p>
<div className="col-lg-8 col-xs-12 col-md-8 loginForm noPadding">
<LoginForm currentLanguage={language}/>
</div>
</div>
</div>
);
};
export default Login;
我还是React的新手，我不确定应该像钥匙一样传递什么信息?在哪里?
I'm still new in React and I'm not sure what should I pass like a key and where?
更新
LoginForm组件:
LoginForm component :
import React from 'react';
import {Link} from 'react-router';
import TextInput from '../../common/formElements/textInput';
import LoginButton from '../../common/formElements/button';
class LoginForm extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
loginData: {
username: '',
password: ''
},
errors: {}
};
this.buttonClickHandle = this.buttonClickHandle.bind(this);
this.loginHandle = this.loginHandle.bind(this);
}
loginHandle(event) {
let field = event.target.name;
let value = event.target.value;
this.state.loginData[field] = value;
return this.setState({loginData: this.state.loginData});
}
buttonClickHandle(event) {
event.preventDefault();
alert("It's clicked/n");
}
render() {
const language = this.props.currentLanguage;
return (
<div className="contact_form">
<form role="form" action="" method="post" id="contact_form">
<div className="col-lg-4 col-md-4 col-sm-4 col-xs-12 smScrPdLeft" style={{marginTop: 5}}>
<TextInput
type="text"
name="username"
label=""
placeholder={language.loginUsername}
className="templateInput loginUsername col-lg-12 col-md-12 col-sm-12 col-xs-12"
id="name"
sizeClass=""
onChange={this.loginHandle}
value={this.state.username}
errors={this.state.errors.username}
/>
</div>
<div className="col-lg-4 col-md-4 col-sm-4 col-xs-12 smPadding" style={{marginTop: 5}}>
<TextInput
type="password"
name="password"
label=""
placeholder={language.loginPassword}
className="templateInput loginPassword col-lg-12 col-md-12 col-sm-12 col-xs-12"
id="password"
sizeClass=""
onChange={this.loginHandle}
value={this.state.password}
errors={this.state.errors.password}
/>
<Link to="/" className="forgotPassLabel">{language.forgotPassword}</Link>
</div>
<div className="col-lg-4 col-md-4 col-sm-4 col-xs-12 btnLogin noPadding smScrPdRight" style={{marginTop: 4}}>
<LoginButton onClick={() => this.buttonClickHandle(event)} name="registration" value={language.loginBtnText} className="rightFloat" icon="user"/>
</div>
</form>
</div>
);
}
}
export default LoginForm;
路由文件:
import React from 'react';
import { IndexRoute, Route } from 'react-router';
import App from './components/App';
import HomePage from './components/HomePage';
const routes = (
<Route path="/" component={App}>
<IndexRoute component={HomePage}/>
</Route>
);
export default routes;
主页组件
return (
<div>
<div className="sidebar-menu-container" id="sidebar-menu-container">
<div className="sidebar-menu-push">
<div className="sidebar-menu-overlay"></div>
<div className="sidebar-menu-inner">
<section className="marginOnXs" style={{width: '100%', padding: 0}}>
<div className="container">
<div className="row hideOnXS">
<MainSlider />
</div>
</div>
</section>
<div id="cta-1" className="onlyOnDesktop">
<Login currentLanguage={languageHome}/>
</div>
<section className="why-us" style={{paddingTop: 0}}>
<Info currentLanguage={languageHome}/>
</section>
<div className="clearfix"></div>
<section className="featured-listing">
<CarsList allCars={carsList()} currentLanguage={languageHome}/>
</section>
<section className="contactSection">
<ContactForm currentLanguage={languageHome}/>
</section>
</div>
</div>
</div>
</div>
);
推荐答案
我不知道您的 LoginForm 组件的外观如何.
I don't know how your LoginForm component looks like.
但是每次迭代数组时，都必须为每个生成的 DOM 元素设置 key 属性，因为 React 需要它优化重新渲染.例如:
But each time you iterate over an array you have to set the key prop to each of the resulting DOM element as React needs it to optimize the re-rendering.
For example:
<div className="container">
{myarray.map((element, index) => {
return <div key={'mykey' + index}>{element}</div>;
})}
</div>
例如，
React 将检测重复项，并仅使用此 key 呈现第一个 node .
React for example will detect duplicates and only renders the first node with this key.
这篇关于反应-数组或迭代器中的每个子代都应具有唯一的“键".支柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
