0

当我的处理程序被调用时，我收到一个错误，即突变不是一个函数。由于某种原因，当我查看this.props.

错误：

RelationshipDropDown.js:58 Uncaught TypeError: this.props.deleteSystemDatasets is not a function
    at RelationshipDropDown.deleteHandler (RelationshipDropDown.js:58)
    at onClick (RelationshipDropDown.js:92) ...

我尝试了多种语法样式，试图将突变和查询传递给组件，并在其他组件中使用了该样式而没有错误。有人可以解释为什么他们没有被通过吗？不知道我错过了什么。

    import React from 'react';
import ReactDOM from 'react-dom';

//Import GraphQL
import gql from 'graphql-tag';
import { graphql, compose } from 'react-apollo';


export class RelationshipDropDown extends React.Component{
    constructor(props){
        super(props);
        this.state = {key:null, system:null};
    };
      deleteHandler() {
        if (this.state.key) {
            console.log(this.state.key, this.state.system)
            console.log(this.props)
            this.props.deleteSystemDatasets({
                variables:{key: this.state.key, datasets: [this.state.system]},
                refetchQueries: [{ query: this.props.getSystemDatasets , variables: {system:this.state.system} }]
            });
        console.log("Dataset " + this.state.key + "Deleted From " + this.state.system);
          }
       };

      handleChange(e){
        let obj = JSON.parse(e.target.value)
        console.log(e.target.value)
        console.log(this.props)
        this.setState({key: obj.key, system: obj.system});
      };

    render(){
        return (
          <div id="relationship-select">
            <select onChange={(e) => this.handleChange(e)} className="select-menu" type="select">
              {this.props.dataArray}
            </select>
            <br/>
            <button onClick={() => this.deleteHandler()}>delete</button>
            <button>edit</button>
          </div>

        )
    }
}

export const GET_SYSTEM_DATASETS = gql`
  query getSystemDatasets($system: String!){
          System(name:$system){
               datasets{
                   name
               }
          }
      }
`;

export const DELETE_SYSTEM_DATASET_RELATIONSHIP = gql`
    mutation deleteSystemDatasets($systemKey: ID!, $datasetKeys: [ID!]!){
    deleteSystemDatasets(key:$systemKey, datasets: $datasetKeys)
    }
`;

const deleteSystemDatasets = graphql(DELETE_SYSTEM_DATASET_RELATIONSHIP, {name: "deleteSystemDatasets"});
const getSystemDatasets = graphql(GET_SYSTEM_DATASETS, {name: "getSystemDatasets"});

export default compose(deleteSystemDatasets, getSystemDatasets)(RelationshipDropDown);
4

1 回答 1

1

它最终成为我忽略的一个乏味的错误。当我进行默认导出时，在另一个我正在渲染组件的文件中，我<Component/>正在导入组件，就好像我使用命名导出export {Component}一样import {Component} from '../path/to/component'。我所要做的就是从我的导入语句中删除花括号，我的道具现在包含我的查询和突变。

于 2018-06-28T23:08:04.613 回答