按下提交按钮后,我使用获取按钮从git api获取有关git用户的信息。获取信息后,我将其写入数据库,然后使用userIsFetched: true
setState,然后有条件地呈现组件。
问题是,在我更改状态userIsFetched: true
之后,我看到了我的<Chat />
组件,但后来我看到了<Signup />
组件。在控制台中,我看到状态被删除了。如果我使用xmlhttprequest然后它工作正常。为什么会这样?
var database = firebase.database();
/*function readData() {
return firebase.database().ref('users/0dc2074d-f7db-4746-91bd-d6e61498b666').once('value')
.then((data)=>data.val())
}*/
class Chat extends React.Component {
render() {
return (<div>
<div className="row">
<div className="col">header</div>
</div>
<div className="row" >
<div className="col-10">one</div>
<div className="col-2">two</div>
</div>
<div className="row">
<div className="col">footer</div>
</div>
</div>)
}
}
class SignIn extends React.Component {
constructor(props) {
super(props);
this.state = {
signLogin: ''
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit() {
this.props.handleSignInSubmit(this.state.signLogin);
}
handleChange(event) {
this.setState({
signLogin: event.target.value
})
}
render() {
return (<div>
<form className="form-signin" onSubmit={this.handleSubmit}>
<h2 className="form-signin-heading">Please sign in</h2>
<br/>
<label className="sr-only">Name</label>
<input type="text" className="form-control" placeholder="Name" required="" autoFocus="" onChange={this.handleChange} value={this.state.value}/>
<br/>
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
}
this.handleSignInSubmit = this.handleSignInSubmit.bind(this);
}
handleSignInSubmit(signLogin) {
fetch(`https://api.github.com/users/${signLogin}`)
.then((response)=>response.json())
.then((user)=>this.writeUserData(uuidv4(), user.name, user.avatar_url))
.then(()=>this.setState({userIsFetched: true}))
.catch( alert );
}
writeUserData(userId, userName, userAvatarUrl) {
firebase.database().ref('users/' + userId)
.set({
userName: userName,
userAvatarUrl : userAvatarUrl
});
}
render() {
console.log(this.state)
return this.state.userIsFetched ? <Chat /> : <SignIn handleSignInSubmit={this.handleSignInSubmit}/>
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
以下是工作示例:https://codepen.io/RinatRezyapov/pen/WEEqJW
尝试输入RinatRezyapov并单击“提交”。
答案 0 :(得分:0)
我忘了添加
event.preventDefault();
在SignIn的提交
中handleSubmit() {
this.props.handleSignInSubmit(this.state.signLogin);
}
现在可行了
handleSubmit(event) {
event.preventDefault();
this.props.handleSignInSubmit(this.state.signLogin);
}