Question

因此，在用户单击提交按钮之后，我可以在控制台中看到结果。有人可以使用下面的代码给我一些指针或示例，以显示这些结果吗？老实说，我没有主意。已经在此上一周了。我看过的所有示例均具有静态数据或在渲染时加载数据。单击提交按钮后，我的应用程序将执行查询；没有预加载的数据。任何帮助将不胜感激。

class Calendar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          startTime: '',//This will keep track of the date/time
          endTime:''
        };

        this.handleSubmit = this.handleSubmit.bind(this);

      }

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

        console.log(this.state.startTime);
        this.setState({
          startTime: new Date(document.getElementById("startTime").value).valueOf(),//getElementById is a jQuery method
          endTime: new Date(document.getElementById("endTime").value).valueOf()
        }, () => {
          this.props.data.refetch({//Assign the inputvalues, which is the current state, to the variables after pressing the submit button
            startTime: this.state.startTime,
            endTime:this.state.endTime
          });
          console.log(this.state.startTime);
          console.log(this.state.endTime);
        });
      };

      render() {

        console.log(this.props);
        return (
          <div className="Calendar">
            <form onSubmit={this.handleSubmit.bind(this)}>
              <label>Start Time</label>
              <input type="datetime-local" id="startTime" step="1" />              



              <label>End Time</label>
              <input type="datetime-local" id="endTime" step="1" onSubmit={this.handleSubmit.bind(this)}/>
              <input type="submit" value="Submit" />
            </form>

          </div>

        );
      }
};
export default graphql(getObjectsQuery, 
  { options: (ownProps) => { 
    console.log(ownProps.startTime); 
    return ({ variables: { startTime: ownProps.startTime,
                            endTime: ownProps.endTime
     } }) 
  } } )(Calendar);

Answer 1

您的查询量只有一半，查询的props部分将能够帮助您将数据返回到组件中。

export default graphql(getObjectsQuery, {
  options: (ownProps) => { 
    console.log(ownProps.startTime); 
    return ({ 
      variables: { 
        startTime: ownProps.startTime,
        endTime: ownProps.endTime
      }
    }) 
  },
  props({ data }) {
    // Data will contain loading, error, and your return object type
    // Since I am destructuring here, you'll need to use the property name
    // you've given in the query
    const { loading, error, returnData } = data;
    if (error) throw new Error(error);
    return { loading, returnData };
  }
})(Calendar);

这时，加载完成后，您的组件将具有带有返回数据的props。然后，您可以.map进行显示所需的任何操作。

React / Graphql：显示查询结果

1 个答案: