Reagieren - Jedes Kind in ein array oder iterator sollte ein eindeutiger "Schlüssel" prop
Ich habe ein problem mit die wichtigsten Requisiten in einem Reagieren JS-Komponente.
Ich bin immer
Warnung: Jedes Kind in ein array oder iterator sollte ein eindeutiger "Schlüssel" prop. Überprüfen Sie die render-Methode von Login. Verabschiedet wurde ein Kind aus der App.
Warnung in der Konsole anmelden. App-Komponente ist wie folgt :
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;
Und meine login-Komponente ist wie folgt :
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;
Ich bin noch neu in der Reaktion und ich bin nicht sicher, was sollte ich den pass wie einen Schlüssel und wo?
UPDATE
LoginForm Komponente :
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;
Routen-Datei :
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;
HomePage-Komponente
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>
);
- Wahrscheinlich eine dumme Frage, aber: Haben Sie daran gedacht, importieren Sie Ihre Komponenten? Ich bekam die gleiche Nachricht, wenn ich hatte <MyComonent /> innerhalb einer Komponente, wo MyComponent nicht importiert werden..
- Dies kann Ihnen helfen, stackoverflow.com/questions/28329382/...
- Ich habe bearbeitet Ihre Frage. In der Zukunft reagieren Fragen bitte auch die
javascript
tag: aus irgendeinem Grund, SO ist das syntax-highlighting funktioniert nicht, wenn Sie nicht. Jemand stellte eine Frage auf der meta-über, die es vor 3 Jahren, aber anscheinend ist es starb aus Mangel an Aufmerksamkeit.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich weiß nicht, wie Ihr
LoginForm
Komponente aussieht.Aber jedes mal, wenn Sie die Iteration über ein array ist, müssen Sie die
key
prop zu jeder der resultierendenDOM
element alsReact
Bedarf es zur Optimierung der re-rendering.Zum Beispiel:
React
zum Beispiel erkennt Duplikate und gibt nur die erstennode
mit diesemkey
.this.props.children
in IhremApp
Komponente? Vielleicht ist das ein array? Alles andere sieht gut aus für mich.App
Komponente. >><App>{//the children you are passing here}</App>
. Dies ist der Ort, wo ein array übergeben werden. Siehe Beschreibung oben unter facebook.github.io/react/tips/children-props-type.htmlHomePage
. Denke, für die weitere Kontrolle eine laufende Turnschuh ist gebraucht. - SorryDen Grund hinter dieser Warnung ist, dass Sie haben nicht bestanden 'key' - Eigenschaft. Reagieren nutzt diese Eigenschaft zur Optimierung des rendering-Prozesses als wenn etwas änderungen Reagieren, ein neu-Rendern wird nur auftreten, für das, was alles verändert hat.
Ob unsere Kinder sind dynamisch und in Fall bekommen Sie gemischt mit random-Funktionen oder neue Komponenten eingeführt werden, in den Anfang des Arrays, das re-Rendern ist wahrscheinlich Durcheinander kommen. So, Sie diese "Schlüssel" - Eigenschaft hilft uns, stellen Sie sicher, dass der Staat und die Identität unserer Komponenten geführt, durch die mehrere Renderings.
Nachfolgend finden Sie ein Beispiel-code-snippet zeigt, wie man einen pass-Taste.
Die Bedeutung der Schlüssel ist schön erklärt hier.