将状态传递给Relay中的getVaribles Mutation(passing state to getVaribles Mutation in Relay)

你如何传递像this.state.username;, this.state.password;这样的状态this.state.username;, this.state.password; to 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> ); } }

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

how do you pass state like this.state.username;, this.state.password; to Relay.Mutation{get variables /config} where this.state.username and this.state.password are mapped to input values from text fields which make the loginMutation {this.state} to return null all examples in relay seem to be one sided (creating queries) where i have Login Component and Login Mutation here are my files

and loginComponent here

the problem i get is that most example use props which are not the way to go about it in react since we use state for fields that change over time i.e mutation anyone who thanks in advance

最满意答案

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

所以要解决这个问题，你需要做的就是在getVariables方法getVariables state的使用改为props 。

The only issue here is that you're referencing state in the mutation itself. You're passing through the component's state as props to the mutation - this is exactly the same as if you were passing state as props to child components.

So to fix the issue, all you should need to to is change the use of state to props in your getVariables method.

更多推荐