Реагировать на приложение componentDidMount рендеринг дважды - PullRequest
0 голосов
/ 29 апреля 2018

У меня есть простое приложение реакции, которое имеет 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 , чтобы выполнить перенаправление, он рендерится только один раз, как и предполагалось. Тем не менее, не знаю, как решить эту проблему, хотя: (

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...