Reactjs API调用遇到React错误

我是一个初学者，我需要一些关于react的帮助，我正在从graphql进行API调用，因此变异在后端工作得很好，但我似乎无法在前端工作，我认为这是一个react问题，如果你知道错误，你能告诉我我在哪里犯了错误以及如何修复它吗。基本上我得到的是“this.props.MutationMakeProduct不是一个函数” 谢谢

import React，{Component}来自'React'；
从'react apollo'导入{graphql}；
从“../graphqlstuff/graph”导入{MutationMakeProduct}；
类AddProductClass扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
注释：“”
};
}
提交表格（e）{
e、 预防默认值（）；
console.log（this.props）；
这个.props.MutationMakeProduct({
变量：{
名称：this.state.name，
注释：this.state.comment
}
});
}
render（）{
返回(
产品名称：
this.setState（{name:e.target.value}）}/>
评论：
this.setState（{comment:e.target.value}）}/>
+
);
}
}
导出默认图形ql（MutationMakeProduct）（AddProductClass）；

当你

console.log（this.props）

你得到了什么？错误非常清楚，这意味着this.props.MutationMakeProduct不是一个函数-我想它不在

props

上，请发布

MutationMakeProduct

中的最小代码量，以及在使用带有变异和无

name

选项的

graphql

HOC时呈现

AddProductClass

的组件配置后，传递给组件的默认道具将是

mutate

而不是

MutationMakeProduct

，因此您需要调用

this.props.mutate

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import {MutationMakeProduct} from '../graphqlstuff/graph';

class AddProductClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      comment: ''
    };
  }

  submitForm(e) {
    e.preventDefault();
    console.log(this.props);
    this.props.MutationMakeProduct({
      variables: {
        name: this.state.name,
        comment: this.state.comment
      }
    });
  }

  render() {
    return (
      <form id="add-product" onSubmit={this.submitForm.bind(this)} >
        <div className="field">
          <label>Product name:</label>
          <input type="text" onChange={(e) => this.setState({ name: e.target.value })} />
        </div>
        <div className="field">
          <label>Comment:</label>
          <input type="text" onChange={(e) => this.setState({ comment: e.target.value })} />
        </div>
        <button>+</button>
      </form>
    );
  }
}

export default graphql(MutationMakeProduct)(AddProductClass);