Reactjs/Graphql:TypeError:Object(...)不是一个函数 [英] Reactjs/Graphql: TypeError: Object(...) is not a function

问题描述

选择日期和时间后，单击提交"按钮，出现以下错误:

After selecting a date and time then clicking the submit button I get the following error:

TypeError:Object(...)不是函数

TypeError: Object(...) is not a function

该对象所指的是Action，它是一个查询，所以我不明白为什么它说它不是函数.另外，请查看handleSubmit事件，并确保我正确地调用了Action.谢谢！

The object is referring to is Action which is a query so I don't understand why it is saying it is not a function. Also, please review handleSubmit event and ensure I am calling Action correctly. THanks!!

渲染组件

class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ""
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit = event => {
    event.preventDefault();

    console.log(this.state.inputValue);
    this.setState({
      inputValue: new Date(document.getElementById("time").value).valueOf()
    });
    Action({
      variables: {
        timestamp: this.state.inputValue
      }
    });

    console.log(this.state.inputValue);
  };

  render() {
    console.log(this.props);
    return (
      <div className="Calendar">
        <form onSubmit={this.handleSubmit.bind(this)}>
          <label>Date/Time</label>
          <input type="datetime-local" id="time" step="1" />
          <input type="submit" value="Submit" />
        </form>
      </div>
      //{this.render(){return (<UserList />)};
    );
  }
}

export default graphql(Action, {
  options: props => ({
    variables: {
      timestamp: props.inputValue
    }
  })
})(Calendar);

动作查询

const Action = gql`
  query($timestamp: Float!) {
    action(timestamp: $timestamp) {
      action
      timestamp
      object {
        filename
      }
    }
  }
`;

推荐答案

这不是重新获取查询的正确方法.

This is not the correct way of refetching the query.

代替

Action({
  variables: {
    timestamp: this.state.inputValue
  }
});

尝试

handleSubmit = event => {
    event.preventDefault();

    console.log(this.state.inputValue);
    this.setState({
      inputValue: new Date(document.getElementById("time").value).valueOf()
    }, () => {
      this.props.data.refetch({
        timestamp: +this.state.inputValue
      });
      console.log(this.state.inputValue);
    });
  };

如果您不想调用此道具 data ，则可以在HOC graphql 上重命名它，如下所示:

if you don't want to call this props data you can rename it on your HOC graphql, like this:

export default graphql(Action, {
  name: 'WHATEVERNAME'
  options: props => ({
    variables: {
      timestamp: props.inputValue
    }
  })
})(Calendar);

然后您将调用 this.props.WHATEVERNAME ，而不是 this.props.data

then you would be calling this.props.WHATEVERNAME instead of this.props.data

希望它可以帮助:D

顺便说一句，您将handleSubmit方法绑定了3次.您只需要执行一次:

by the way, you are binding your handleSubmit method 3 times. You need to do it only once:

不建议在渲染中使用
1. 绑定，因为您将在每次重新渲染时都处理绑定:

因此，您可能需要将< form onSubmit = {this.handleSubmit.bind(this)}> 更改为< form onSubmit = {this.handleSubmit}>

So you will probably want to change <form onSubmit={this.handleSubmit.bind(this)}> to <form onSubmit={this.handleSubmit}>

1. 您可以像以前一样将其绑定到构造函数上.那没问题.但这有点冗长.我会删除它.

3. handleSubmit = event =>{通过将方法声明为箭头函数，就像您所做的那样，该方法会自动绑定到 this .所以我会保留并删除其他2 :)

3.handleSubmit = event => { by declaring the method as an arrow function as you did the method is automatically binded to this. So I would keep that and remove the other 2 :)

PS:请注意，在第3个代码上，如果您要编写 handleSubmit(e){} ，它将不会绑定到 this ，因此您需要另一个2种方法.但同样，数字3是绑定的最有效方法:)只需删除其他2，就可以了.

PS: note that on number 3 if you were to write handleSubmit(e) {} it would not be binded to this so you would need one of the other 2 approaches. But again, number 3 is the most efficient way to bind :) Just remove the other 2 and you are good to go.

这篇关于Reactjs/Graphql:TypeError:Object(...)不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！