在 reactjs 组件中使用 fetch 重新初始化应用程序(状态)
Posted
技术标签:
【中文标题】在 reactjs 组件中使用 fetch 重新初始化应用程序(状态)【英文标题】:Using fetch in reactjs component reinitialize application (state) 【发布时间】:2018-01-27 21:53:25 【问题描述】:按下提交按钮后,我使用获取按钮从 git api 获取有关 git 用户的信息。获取信息后,我将其写入数据库,然后使用userIsFetched: true
设置状态,然后有条件地渲染组件。
问题是,在我更改状态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 并点击提交。
【问题讨论】:
在此处发布您的相关代码。Here is the working example
- 不起作用,它会短暂显示错误...“TypeError: NetworkError when trying to fetch resource”
【参考方案1】:
忘记加了
event.preventDefault();
登录SignIn的提交
handleSubmit()
this.props.handleSignInSubmit(this.state.signLogin);
现在可以了
handleSubmit(event)
event.preventDefault();
this.props.handleSignInSubmit(this.state.signLogin);
【讨论】:
以上是关于在 reactjs 组件中使用 fetch 重新初始化应用程序(状态)的主要内容,如果未能解决你的问题,请参考以下文章