Reactjs 希望有条件地调用一个突变

我在从主呈现类中的处理程序有条件地调用变异时遇到问题。不幸的是，我无法实现提交按钮（受项目定义的限制，我的DOM输入必须在更改时动态呈现新的图形），并且必须在允许执行变异之前验证条件，但我似乎无法诊断对此的修复

在下面，您可以找到父组件代码。请注意，变异仍然在验证处理程序中，在修复程序建立之前，它暂时处于那里

import React, { Component } from "react";
import CurrencyInput from "./CurrencyInput";
import SliderInput from "./SliderInput";
import DisplayGraph from "./DisplayGraph";
import "./InputGraphSection.css";
import FrequencyInput from "./FrequencyInput";
import { Mutation } from "react-apollo";
import gql from "graphql-tag";

const SAVINGS_MUTATION = gql`
    mutation savingsmutation(
        $paymentFrequency: Int!
        $initialDeposit: Float!
        $monthlyDeposit: Float!
        $interestRate: Float!
    ) {
        createSavings(
            paymentFrequency: $paymentFrequency
            initialDeposit: $initialDeposit
            monthlyDeposit: $monthlyDeposit
            interestRate: $interestRate
        ) {
            savings {
                months {
                    id
                    totalInterest
                    totalValue
                }
            }
        }
    }
`;

export default class InputGraphSectionContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            savT: [{ x: 0, y: 0 }],
            intT: [{ x: 0, y: 0 }]
        };
    }
    handleComplete = ({ data: { createSavings } }) => {
        this.setState(prevState => ({
            savT: [
                ...prevState.savT,
                // month is inside the data returned by the API????
                { x: createSavings.savings.months.id, y: createSavings.savings.months.totalValue }
            ],
            intT: [
                ...prevState.intT,
                { x: createSavings.savings.months.id, y: createSavings.savings.months.totalInterest }
            ]
        }));
    };
    render() {
        const { savT, intT } = this.state;
        return (
            <Mutation mutation={SAVINGS_MUTATION} onCompleted={this.handleComplete}>
                {savingsmutation => (
                    <InputGraphSection mutate={savingsmutation} savT={savT} intT={intT} />
                )}
            </Mutation>
        );
    }
}

class InputGraphSection extends Component {
    constructor(props) {
        super(props);
        this.state = {
            initialDeposit: "",
            monthlyDeposit: "",
            interestRate: 0,
            paymentFrequency: ""
        };
    }
    componentDidUpdate({ mutate }, prevState) {
        console.log(this.state);

        if (
            this.state.initialDeposit !== "" &&
            this.state.monthlyDeposit !== "" &&
            this.state.paymentFrequency !== "" &&
            prevState !== this.state
        ) {
            //If currencyInput elements are returning strings, convert to ints here.
            var paymentF = Number(this.state.paymentFrequency);
            var initialD = parseFloat(this.state.initialDeposit);
            var monthlyD = parseFloat(this.state.monthlyDeposit);
            var interestR = parseFloat(this.state.interestRate)/100;

            console.log("execute mutation");
            mutate({
                variables: {
                    paymentFrequency: paymentF,
                    initialDeposit: initialD,
                    monthlyDeposit: monthlyD,
                    interestRate: interestR
                }
            });
            console.log("Mutation query commencing")
        } else {
            console.log("Input Requirements not met, will not generate graph.");
        }
    }
    handleChange = evt => {
        const { name, value } = evt.target;
        this.setState({ [name]: value });
    };

    render() {
        const {
            initialDeposit,
            monthlyDeposit,
            interestRate,
            paymentFrequency
        } = this.state;
        const { savT, intT } = this.props;
        return (
            <div>
                <p className="input-label">
                    Inputs must be positive and have no more than 15 digits with 2 decimal
                    places!
                </p>
                <div className="financial-inputs">
                    <p className="input-label">What is your initial Deposit?</p>
                    <CurrencyInput
                        name="initialDeposit"
                        value={initialDeposit}
                        onInputChange={this.handleChange}
                    />
                    <p className="input-label">How much will you save each month?</p>
                    <CurrencyInput
                        name="monthlyDeposit"
                        value={monthlyDeposit}
                        onInputChange={this.handleChange}
                    />
                    <p className="input-label">
                        What is the annual interest rate you have acquired?
                    </p>
                    <SliderInput
                        name="interestRate"
                        value={Number(interestRate)}
                        onInputChange={this.handleChange}
                    />
                    <p className="input-label">
                        Specify the frequency of interest compounding.
                    </p>
                    <FrequencyInput
                        name="paymentFrequency"
                        value={paymentFrequency}
                        onInputChange={this.handleChange}
                    />
                </div>
                <div className="financial-display">
                    <DisplayGraph savT={savT} intT={intT} />
                </div>
            </div>
        );
    }
}

我也有一些阿波罗文档教程为我指明了方向，但不幸的是，它们依赖于不同的项目结构，由于项目限制，我无法复制

在下面，您可以找到父组件代码。请注意，变异仍然在验证处理程序中，在修复程序建立之前，它暂时处于那里

import React, { Component } from "react";
import CurrencyInput from "./CurrencyInput";
import SliderInput from "./SliderInput";
import DisplayGraph from "./DisplayGraph";
import "./InputGraphSection.css";
import FrequencyInput from "./FrequencyInput";
import { Mutation } from "react-apollo";
import gql from "graphql-tag";

const SAVINGS_MUTATION = gql`
    mutation savingsmutation(
        $paymentFrequency: Int!
        $initialDeposit: Float!
        $monthlyDeposit: Float!
        $interestRate: Float!
    ) {
        createSavings(
            paymentFrequency: $paymentFrequency
            initialDeposit: $initialDeposit
            monthlyDeposit: $monthlyDeposit
            interestRate: $interestRate
        ) {
            savings {
                months {
                    id
                    totalInterest
                    totalValue
                }
            }
        }
    }
`;

export default class InputGraphSectionContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            savT: [{ x: 0, y: 0 }],
            intT: [{ x: 0, y: 0 }]
        };
    }
    handleComplete = ({ data: { createSavings } }) => {
        this.setState(prevState => ({
            savT: [
                ...prevState.savT,
                // month is inside the data returned by the API????
                { x: createSavings.savings.months.id, y: createSavings.savings.months.totalValue }
            ],
            intT: [
                ...prevState.intT,
                { x: createSavings.savings.months.id, y: createSavings.savings.months.totalInterest }
            ]
        }));
    };
    render() {
        const { savT, intT } = this.state;
        return (
            <Mutation mutation={SAVINGS_MUTATION} onCompleted={this.handleComplete}>
                {savingsmutation => (
                    <InputGraphSection mutate={savingsmutation} savT={savT} intT={intT} />
                )}
            </Mutation>
        );
    }
}

class InputGraphSection extends Component {
    constructor(props) {
        super(props);
        this.state = {
            initialDeposit: "",
            monthlyDeposit: "",
            interestRate: 0,
            paymentFrequency: ""
        };
    }
    componentDidUpdate({ mutate }, prevState) {
        console.log(this.state);

        if (
            this.state.initialDeposit !== "" &&
            this.state.monthlyDeposit !== "" &&
            this.state.paymentFrequency !== "" &&
            prevState !== this.state
        ) {
            //If currencyInput elements are returning strings, convert to ints here.
            var paymentF = Number(this.state.paymentFrequency);
            var initialD = parseFloat(this.state.initialDeposit);
            var monthlyD = parseFloat(this.state.monthlyDeposit);
            var interestR = parseFloat(this.state.interestRate)/100;

            console.log("execute mutation");
            mutate({
                variables: {
                    paymentFrequency: paymentF,
                    initialDeposit: initialD,
                    monthlyDeposit: monthlyD,
                    interestRate: interestR
                }
            });
            console.log("Mutation query commencing")
        } else {
            console.log("Input Requirements not met, will not generate graph.");
        }
    }
    handleChange = evt => {
        const { name, value } = evt.target;
        this.setState({ [name]: value });
    };

    render() {
        const {
            initialDeposit,
            monthlyDeposit,
            interestRate,
            paymentFrequency
        } = this.state;
        const { savT, intT } = this.props;
        return (
            <div>
                <p className="input-label">
                    Inputs must be positive and have no more than 15 digits with 2 decimal
                    places!
                </p>
                <div className="financial-inputs">
                    <p className="input-label">What is your initial Deposit?</p>
                    <CurrencyInput
                        name="initialDeposit"
                        value={initialDeposit}
                        onInputChange={this.handleChange}
                    />
                    <p className="input-label">How much will you save each month?</p>
                    <CurrencyInput
                        name="monthlyDeposit"
                        value={monthlyDeposit}
                        onInputChange={this.handleChange}
                    />
                    <p className="input-label">
                        What is the annual interest rate you have acquired?
                    </p>
                    <SliderInput
                        name="interestRate"
                        value={Number(interestRate)}
                        onInputChange={this.handleChange}
                    />
                    <p className="input-label">
                        Specify the frequency of interest compounding.
                    </p>
                    <FrequencyInput
                        name="paymentFrequency"
                        value={paymentFrequency}
                        onInputChange={this.handleChange}
                    />
                </div>
                <div className="financial-display">
                    <DisplayGraph savT={savT} intT={intT} />
                </div>
            </div>
        );
    }
}

import React，{Component}来自“React”；
从“/CurrencyInput”导入CurrencyInput；
从“/SliderInput”导入SliderInput；
从“/DisplayGraph”导入DisplayGraph；
导入“/InputGraphSection.css”；
从“/FrequencyInput”导入FrequencyInput；
从“反应阿波罗”中导入{突变}；
从“graphql标签”导入gql；
常数节省_变异=gql`
突变保存(
$paymentFrequency:Int！
美元初始存款：浮动！
$monthlydeposite:浮动！
$interestRate:浮动！
) {
创造储蓄(
paymentFrequency:$paymentFrequency
初始存款：初始存款
monthlyDeposit:$monthlyDeposit
利率：$利率
) {
储蓄{
月份{
身份证件
全部利益
总价值
}
}
}
}
`;
导出默认类InputGraphSectionContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
savT:[{x:0，y:0}]，
intT:[{x:0，y:0}]
};
}
handleComplete=（{data:{createSavings}}）=>{
this.setState（prevState=>({
专家：[
…prevState.savT，
//月份在API返回的数据内？？？？
{x:createSavings.savings.months.id，y:createSavings.savings.months.totalValue}
],
intT:[
…prevState.intT，
{x:createSavings.savings.months.id，y:createSavings.savings.months.totalInterest}
]
}));
};
render（）{
const{savT，intT}=this.state；
返回(
{savingstation=>(
)}
);
}
}
类InputGraphSection扩展组件{
建造师（道具）{
超级（道具）；
此.state={
初始存款：“，
月沉积：“，
利率：0，
付款频率：“
};
}
componentDidUpdate（{mutate}，prevState）{
console.log（this.state）；
如果(
this.state.initialDeposit！==“”&&
this.state.monthlyDeposit！==“”&&
this.state.paymentFrequency！==“”&&
prevState！==this.state
) {
//如果currencyInput元素返回字符串，请在此处转换为int。
var paymentF=编号（this.state.paymentFrequency）；
var initialD=parseFloat（this.state.initialDeposit）；
var monthlyD=parseFloat（this.state.monthlyDeposit）；
var interestR=parseFloat（this.state.interestRate）/100；
log（“执行变异”）；
变异({
变量：{
付款频率：paymentF，
首字母存款：首字母，
monthlyDeposit:monthlyD，
利率：利率
}
});
日志（“变异查询开始”）
}否则{
log（“未满足输入要求，将不会生成图形”）；
}
}
handleChange=evt=>{
const{name，value}=evt.target；
this.setState（{[name]：value}）；
};
render（）{
常数{
初始存款，
每月存款，
利率，
支付频率
}=本州；
const{savT，intT}=this.props；
返回(

输入必须为正数，且不超过15位小数点后2位
地方！

您的初始存款是多少
您每月将节省多少钱

您获得的年利率是多少？


指定利息复利的频率。

);
}
}

有多种方法可以有条件地调用apollo突变，因为通常有多种方法调用突变。这些方法包括

Mutation

组件，直接在客户端调用mutate，或者使用

graphql

HOC

您的示例使用的是遵循渲染道具模式的。为了使用它，您需要渲染组件，然后调用它提供的变体：

...
render() {
  return (
    <Mutation
      mutation={SAVINGS_MUTATION}
      variables={{
        paymentFrequency: paymentF,
        initialDeposit: initialD,
        monthlyDeposit: monthlyD,
        interestRate: interestR
      }}
    >
      {(savingsmutation, { data }) => {
        return (
          <CurrencyInput
            value={initialDeposit}
            onInputChange={() => savingsmutation()}
          />
        )
      }}
    </Mutation>
  )
}
...

最后使用

---

看起来很棒！当我调用我的数据来构建我的两个数组savT和intT时，数据声明b会是什么

import { graphql } from 'react-apollo'

class InputGraphSection extends Component {
  handleChange() {
    this.props.mutate({
      paymentFrequency: paymentF,
      initialDeposit: initialD,
      monthlyDeposit: monthlyD,
      interestRate: interestR
    })
  }
}

export default graphql(SAVINGS_MUTATION)(InputGraphSection)