Question

如何将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 here

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

    );

  }

}

我得到的问题是，大多数示例使用道具而不是反应的方式，因为我们使用状态来改变随时间变化的字段，即突变任何人提前谢谢

Answer 1

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

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

将状态传递给Relay中的getVaribles Mutation

1 个答案: