Javascript Reactjs/Graphql:TypeError:Object（…）不是函数

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

TypeError:对象（…）不是函数

对象所指的是作为查询的操作，所以我不理解为什么它说它不是函数。另外，请查看handleSubmit事件，并确保我正确调用操作。谢谢

渲染组件

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);

---

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

而不是

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

试一试

如果您不想调用此道具

数据

，可以在HOC

图形ql

上重命名它，如下所示：

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

然后您将调用

this.props.WHATEVERNAME

而不是

this.props.data

希望能有帮助：D

顺便说一下，您将handleSubmit方法绑定了3次。您只需执行一次：

不建议在渲染中绑定，因为您将在每次重新渲染时处理绑定：

因此，您可能需要将

更改为

您可以像以前那样在构造函数上绑定它。没关系。但它有点冗长。我会删除它

3.

handleSubmit=event=>{

通过像您那样将方法声明为箭头函数，该方法将自动绑定到

此

。因此我将保留该方法并删除其他2:）

---

注：请注意，如果您要在数字3上编写

handleSubmit（e）{}

，它将不会绑定到

this

，因此您需要另外两种方法中的一种。但是，数字3是绑定的最有效方法：）只需删除另外两种，就可以了。

现在我得到了这个：

[GraphQL error]：Message:Variable未提供所需类型“Float！”的“$timestamp！”，位置：[对象]，Path:undefined

这告诉我时间戳值不会传递给查询？您可能希望调用refetch查询作为来自setState的回调…因为它是异步的，您可能正在调用具有先前状态的refetch查询，而不是您想要的新查询。请检查建议的答案…刚刚编辑：）除此之外，你能把你的新代码放在我可以看一看的地方吗？注意，refetch查询现在在一个函数回调中，作为setState函数的第二个参数发送，这样我可以保证当我调用

this.state

时，我会有更新的值。这正是refetch正在做的…检查你的chr上的网络选项卡ome开发工具…您必须在提交时使用时间戳发出新请求

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);
    });
  };

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