У меня есть простое приложение реакции, которое имеет Login, который получает Json Web Token при успешной аутентификации и передает его в одноуровневый компонент (Members), который в свой componentDidMount использует этот JWT, чтобы сделать выборочный вызов на сервер , Дело в том, что componentDidMount вызывается дважды, первый с неопределенным JWT и второй раз с извлеченным JWT.
Вот мой код:
Приложение (родительский код):
class App extends Component{
state = {
clientToken: ''
}
callbackGetToken = (token) => {
this.setState({clientToken: token});
}
render(){
return(
<Switch>
<Route exact path="/" component={props => <Login sendToken = {this.callbackGetToken}/>}/>
<Route exact path="/members" component={props => <Members authToken = {this.state.clientToken}/>}/>
</Switch>
)
}
};
export default App;
Компонент входа:
class Login extends Component {
state = {
credentials:{
"username": "",
"password": ""
},
clientToken: ""
}
constructor(props){
super(props);
this.handleUsernameChange = this.handleUsernameChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
}
handleUsernameChange(event){
this.state.credentials.username = event.target.value;
}
handlePasswordChange(event){
this.state.credentials.password = event.target.value;
}
handleFormSubmit(event){
event.preventDefault();
const data = JSON.stringify(this.state.credentials);
fetch(loginFormurl, {
method: 'POST',
headers: {
"Content-Type": "application/json"
},
body: data,
})
.then((response) => {
if(response.ok){
const token = response.headers.get('Authorization');
console.log(token);
this.setState({clientToken: token});
this.props.sendToken(token);
}else{
console.log(response.statusText);
}
})
.catch(function(error) {
console.log(error);
});
}
render() {
if (this.state.clientToken !== "") {
return <Redirect to='./members' />;
}
return (
<div className="App">
<h1 className="Login-title">Login to Social Media Aggregator</h1>
<form className="Login-box" onSubmit={this.handleFormSubmit}>
<p>
<label>
Username
<input id="username" type="text" name="username" required onChange={this.handleUsernameChange}/>
</label>
</p>
<p>
<label>
Password
<input id="password" type="password" name="password" autoComplete="password" required onChange={this.handlePasswordChange}/>
</label>
</p>
<p><input type="submit" value="Login"/></p>
</form>
</div>
);
}
}
export default withRouter(Login);
И компонент «Братья и сестры»:
class Members extends Component{
constructor(props){
super(props);
this.state = {
interrests: [],
authToken: props.authToken
}
}
componentDidMount(){
fetch(interestUrl, {
method: 'GET',
headers: {
"Content-Type": "application/json",
"Authorization": this.state.authToken
}
})
.then((response) => {
if(response.ok){
console.log(response.json());
}else{
console.log(response.statusText);
}
})
};
render(){
return(
<div>
<Menu/>
<Main/>
</div>
)
}
}
export default Members;
Есть идеи, как это решить? Спасибо!
UPDATE
Нашел проблему. Кажется, что компонент Redirect из Login создает компонент Members дважды. Если я удаляю Redirect со страницы и вместо этого просто вставляю Link , чтобы выполнить перенаправление, он рендерится только один раз, как и предполагалось. Тем не менее, не знаю, как решить эту проблему, хотя: (