Question

当我的处理程序被调用时，我得到一个错误，指出该突变不是一个函数。由于某些原因，当我查看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);

Answer 1

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

突变和查询道具未传递给组件

1 个答案: