Reactjs/Graphql: TypeError: Object(...) is not a function

Question

选择日期和时间然后单击提交按钮后，我收到以下错误：

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

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

渲染组件

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

Answer 1

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

代替

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，像这样：

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

那么您将调用 this.props.WHATEVERNAME 而不是 this.props.data

希望对你有帮助：D

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

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

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

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

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

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