0
React JS 구성 요소의 키 소품에 문제가 있습니다.React - 배열 또는 반복자의 각 자식에는 고유 한 "키"소품이 있어야합니다.
나는
경고를 받고 있어요 : 배열 또는 반복자의 각 아동이 고유의 "키"소품이 있어야합니다. 로그인의 렌더링 방법을 확인하십시오. 그것은 App으로부터 아이를 넘겼습니다.
콘솔 로그에서 경고.
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;
나는 아직도 반작용의 새로운 그리고 난 내가 키와 경우처럼 통과해야하는지 확실하지 않다 다음과 같이 응용 프로그램의 구성 요소입니다 ?
UPDATE
LoginForm 구성 요소 :
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>
);
아마 어리석은 질문이지만 : 구성 요소를 가져 오는 것을 잊지 않았습니까? MyComponent를 가져 오지 않은 구성 요소 안에