Reactjs Reacjs/Graphql：传递变量值以从事件查询

因此，下面的代码正在更新inputValue的状态，但由于某些原因，无法将该值传递给查询，如下所示错误：

[GraphQL错误]：消息：未提供所需类型“Float！”的变量“$timestamp！”，位置：[对象]，路径：未定义

所以我的问题是如何将inputValue分配给timestamp并将timestamp传递给getObjectsQuery

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()
    }); //Parent component contains submit button and there lives state. Submit handler should only set value in state with...setState()- NOT directly
    this.props.data.refetch({
      //For some reason
      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(getObjectsQuery, {
  options: props => ({
    variables: {
      timestamp: props.inputvalue
    }
  })
})(Calendar);

类日历扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入值：“
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit=事件=>{
event.preventDefault（）；
console.log（this.state.inputValue）；
这是我的国家({
inputValue:new Date（document.getElementById（“time”）.value）.valueOf（）
})；//父组件包含submit按钮，并且存在状态。submit处理程序应仅使用…setState（）在状态中设置值-而不是直接设置值
this.props.data.refetch({
//出于某种原因
时间戳：this.state.inputvalue
});
console.log（this.state.inputValue）；
};
render（）{
console.log（this.props）；
返回(
日期/时间
//{this.render（）{return（）}；
);
}
}
导出默认图形QL（getObjectsQuery{
选项：道具=>({
变量：{
时间戳：props.inputvalue
}
})
})（日历）；

我知道它已经在另一个地方解决了

记住（你还没学会）：

要使用事件中的值，您可以简单地使用它的值，而不是通过“异步缓冲区”（state）传递它

当然，使用setState回调也是一个很好的解决方法

---

请注意，您可以有两个渲染-一个是在状态更改时，另一个是在数据到达时。如果不需要将值存储在状态中，您可以避免一个不必要的渲染。

请向您显示query

const getObjectsQuery=gql

query（$timestamp:Float！）{action（timestamp:$timestamp）{action timestamp object{filename}}；您是否检查了graphiql/Playerd中的查询是否正常工作？

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

  console.log(this.state.inputValue);  // OLD VALUE
  this.setState({
    inputValue: new Date(document.getElementById("time").value).valueOf()
  }); 

  this.props.data.refetch({
    //For some reason
    timestamp: this.state.inputvalue 
    // THERE IS STILL OLD VALUE 
    // because setState work asynchronously 
    // IT WILL BE UPDATED LATER
  });

  console.log(this.state.inputValue); // STILL OLD VALUE
};

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

  console.log(this.state.inputValue);  // OLD VALUE
  const timestamp = new Date(document.getElementById("time").value).valueOf()
  console.log(timestamp);  // NEW VALUE

  // use new value directly
  this.props.data.refetch({
    timestamp: +timestamp
    // convert to int
  });

  // save in state - IF NEEDED at all
  this.setState({
    inputValue: timestamp
  });
};