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 次。您只需执行一次:
- 不建议在渲染中进行绑定,因为您将在每次重新渲染时处理绑定:
因此,您可能需要将
<form onSubmit={this.handleSubmit.bind(this)}>
更改为
<form onSubmit={this.handleSubmit}>
- 您可以像以前一样将其绑定在构造函数上。没问题。但是有点冗长。我会删除它。
3.
handleSubmit = event => {
通过将方法声明为箭头函数,该方法会自动绑定到
this
。所以我会保留那个并删除其他 2 个 :)
PS:请注意,在第 3 个方法上,如果您要写入
handleSubmit(e) {
,它将不会绑定到
this
,因此您需要其他 2 种方法之一。但同样,第 3 种方法是最有效的绑定方法 :) 只需删除其他 2 个方法,您就可以开始了。
marcelotokarnia
2018-08-03