开发者问题收集

Reactjs/Graphql:TypeError:Object(…)不是一个函数

2018-08-02
2221

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

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

对象引用的是 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);

Action 查询

const Action = gql`
  query($timestamp: Float!) {
    action(timestamp: $timestamp) {
      action
      timestamp
      object {
        filename
      }
    }
  }
`;
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);
    });
  };

如果您不想将此 props 称为 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:请注意,在第 3 个方法上,如果您要写入 handleSubmit(e) { ,它将不会绑定到 this ,因此您需要其他 2 种方法之一。但同样,第 3 种方法是最有效的绑定方法 :) 只需删除其他 2 个方法,您就可以开始了。

marcelotokarnia
2018-08-03