将状态传递给中继中的 getVaribles 突变答案

【问题标题】：passing state to getVaribles Mutation in Relay将状态传递给中继中的 getVaribles 突变
【发布时间】：2017-01-26 12:33:14
【问题描述】：

如何将this.state.username;, this.state.password; 之类的状态传递给Relay.Mutation{get variables /config}，其中 this.state.username 和 this.state.password 被映射到文本字段中的输入值，这使得 loginMutation {this.state} 返回 null 中继中的所有示例似乎是一方面（创建查询），我有Login Component 和Login Mutation 这是我的文件

//loginMutation named as verifyMutation.js
import Relay from 'react-relay';

class VerifyMutation extends Relay.Mutation {

  getMutation() {
    return Relay.QL`
      mutation { mpesaVerify }
    `;
  }

  getVariables() {
    return {
      phoneNumber: this.state.username,//this.state return null
      transactionID: this.state.password//this.state retuns null
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on verificationPayload {
        featureEdge,
        viewer { features }
      }
    `;
  }

  getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'viewer',
      parentID: this.props.viewerId,
      connectionName: 'features',
      edgeName: 'featureEdge',
      rangeBehaviors: {
        '': 'append',
      },
    }];
  }
}

export default VerifyMutation;

这里是 loginComponent

//loginComponent.js
import React from 'react';
import Relay from 'react-relay';

import { Grid, Cell, Button, Textfield } from 'react-mdl';

import  VerifyMutation from './VerifyMutation';

import Page from '../Page/PageComponent';
import info from './infoComponent';

import styles from './Verify.scss';



export default class Verify extends React.Component {

  static propTypes = {
    viewer: React.PropTypes.object.isRequired
  };

  constructor (props){
    super(props);
    this.state =  {username:'',password:''}
  };

  onUsernameChange(e){
    this.setState({username:e.target.value});
  };
  onPasswordChange (e){
    this.setState({password:e.target.value});
  };

  handleSubmit = (e)=>{
    e.preventDefault();
    //enter relay world
    const verifyMutation = new VerifyMutation({viewerId:this.props.viewer.id, ...this.state});
    Relay.Store.commitUpdate(verifyMutation, {onError: err => console.error.bind(console,err)});

  }



  render() {

    return (

      <div>
        <Page heading='Verify Payments'>
          <Grid>
            <Cell col={4}>
              <h3>How to go about it</h3>
              <p>
                username: {this.state.username} and
                password: {this.state.password}
              </p>
            </Cell>
            <Cell col={4}>
              /*if verified show results here instead of this */
              <form  onSubmit={this.handleSubmit.bind(this)} >
                <Textfield
                  value={this.state.username}
                onChange={this.onUsername.bind(this)}
                error="username please"
                label="username."
                error="please use valid username"
                required={true}
                style={{width: '200px'}}/>
                <Textfield
                  value={this.state.username}
                  onChange={this.onUsernameChange.bind(this)}
                  pattern="[A-Z0-9]{7,10}"
                  error="should be 7 to 10 letters"
                  label="password"
                  required={true}
                  style={{width: '200px'}}
                />
                <input type="hidden" value={this.props.viewer.id} />
                <Button raised colored >Verify</Button>
              </form>
            </Cell>
            <Cell col={4}>
            </Cell>
          </Grid>
        </Page>
      </div>

    );

  }

}

我遇到的问题是，大多数示例都使用道具，而这些道具并不是反应的方式，因为我们将状态用于随时间变化的字段，即突变任何人提前致谢

【问题讨论】：

标签： javascript reactjs react-router graphql relayjs

【解决方案1】：

这里唯一的问题是您在突变本身中引用状态。您将组件的状态作为道具传递给突变 - 这与您将状态作为道具传递给子组件完全相同。

因此，要解决此问题，您只需将state 的用法更改为props 在您的getVariables 方法中。

【讨论】：