javascript - 将状态传递给 Relay 中的 getVaribles 突变

Question

如何将 this.state.username;, this.state.password; 之类的状态传递给 Relay.Mutation{get Variables/config} 其中 this.state .username 和 this.state.password 映射到文本字段中的输入值，这使得 loginMutation {this.state} 返回 null 中继中的所有示例似乎都是单方面的(创建查询)，其中我有登录组件和登录突变 这是我的文件

//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.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>

    );

  }

}

我遇到的问题是，大多数示例都使用 props，这并不是在 React 中进行处理的方法，因为我们使用状态来表示随时间变化的字段，即突变任何人 提前致谢

Answer 1

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

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