在 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 重新初始化应用程序(状态)的主要内容,如果未能解决你的问题,请参考以下文章

reactjs 服务和表示组件拆分

在 ReactJS 中使用 fetch 上传状态错误

如何在 reactjs 中重新加载组件(“<Comment />)?

重新渲染 Reactjs 数组组件

如何在状态更改(父)reactjs时重新渲染子组件

addEventListener('fetch', callback) 在 ReactJS 中永远不会触发回调