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

Posted 2023-03-08

【中文标题】将状态传递给中继中的 getVaribles 突变

【英文标题】：passing state to getVaribles Mutation in Relay

【发布时间】：2017-01-26 12:33:14

【问题描述】：

如何将this.state.username;, this.state.password; 之类的状态传递给Relay.Mutationget 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>

    );

  

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

【参考方案1】：

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

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