Apolloの突然変異コールバックの不変違反設定状態

Question

私は、イベントハンドラからmutate関数を呼び出して、catch節でthis.setStateを使用しようとするとInvariant Violationエラーが発生します。

saveToken({data}){ 
    let {userId, token, expires} = data.login; 
    storeLoginToken(userId, token, expires); 
    history.push('/dogs'); 
} 
setErrors(error){ 
    this.setState('error', error.graphQLErrors); 
} 
handleSubmit(event) { 
    event.preventDefault(); 
    let {email, password} = this.state; 
    let {history} = this.props; 
    let clientKey = getClientKey(); 
    this.props.mutate({ variables: { email, password, clientKey } }) 
    .then(this.saveToken.bind(this)) 
    .catch(this.setErrors.bind(this)) 
} 

Answer 1

私はこの問題は、あなたがsetState関数の内部で開閉ブラケットを逃したことだと思います。

私はこのようにそれを記述します。

class ClassName extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
     error, 
 
     ... 
 
     }; 
 
     
 
     this.saveToken = this.saveToken.bind(this); 
 
     this.setErrors = this.setErrors.bind(this) 
 
    } 
 

 
    ... 
 

 
    setErrors(error) { 
 
     this.setState({error: error.graphQLErrors}); // should work with brackets 
 
    } 
 
    
 
    handleSubmit(event) { 
 
    event.preventDefault(); 
 
    let { email, password } = this.state; 
 
    let { history } = this.props; 
 
    let clientKey = getClientKey(); 
 
    this.props.mutate({ 
 
     variables: { 
 
      email, 
 
      password, 
 
      clientKey 
 
     } 
 
     }) 
 
     .then(this.saveToken) 
 
     .catch(this.setErrors) 
 
    } 
 

 
}