ReactJS 查询变量

Question

不知道我做错了什么，但我在点击提交按钮后收到以下错误消息：

TypeError: this.props.ObjectQuery 不是函数

查询代码如下：

   const ObjectQuery  = gql`
   query($timestamp: Float!){
    action(timestamp: $timestamp){
      action
      timestamp
        object{
          filename
    }
  }
}


`;

class UserList extends React.Component {
  render() {
  
    return (
          
        ({ loading, error, data }) => {
          if (loading) return <p>Loading...</p>;
          if (error) {
            console.log(error);
            return <p>Error</p>;
          }

          if (data.action.length === 0) return <div>No Objects</div>;

          return (//this code binds the query above to the output and puts it on the screen.
            <Item.Group divided>
            {data.action.map(action => (
              <div>
              <ul>
                <li key = {action.action}>{action.action}</li>
                <li key = {action.timestamp}>{action.timestamp}</li>
                <ul>
                  {action.object.map((obj) => {
                    return (<li>{obj.filename}</li>)
                  })}
                </ul>
              </ul>
            </div>
          ))}
            </Item.Group>
          );
        }
       
    )};
  }
export default graphql(ObjectQuery, {
    options: (props) => ({variables: {timestamp: props.timestamp}})
})(UserList);

    

这是提交按钮的代码。另外，由于某种原因，import 语句是灰色的。

import ObjectQuery from '../UserList';   

handleSubmit(event) {
    event.preventDefault();
    console.log(this.state)
     this.setState({ inputValue: new Date(document.getElementById("time").value ).valueOf() });
                this.props.ObjectQuery({
                  variables:{
                    timestamp: this.state.inputValue
                  },
                  
                  });
                
                }

Answer 1

首先是您没有将 ObjectQuery 创建为函数。您将其初始化为常量。

const ObjectQuery  = gql`
   query($timestamp: Float!){
    action(timestamp: $timestamp){
      action
      timestamp
        object{
          filename
    }
  }
}`;

如果您希望它成为一个函数，请将其创建为一个函数。您还可以通过导出它在其他组件上使用它。可以通过添加export来导出函数

export function ObjectQuery() {
    gql`
query($timestamp: Float!){
 action(timestamp: $timestamp){
   action
   timestamp
     object{
       filename
 }
}
}
`;

}

另外，this.props.ObjectQuery 是无效的，因为您没有将它添加到组件上。但是看到您导入了 ObjectQuery，您现在可以将其用作函数。

this.setState({ inputValue: new Date(document.getElementById("time").value).valueOf() });
    ObjectQuery({ // no this.props
        variables: {
            timestamp: this.state.inputValue
        },

    });

顺便说一句，如果两个文件在同一个文件夹中，你可以使用

import ObjectQuery from './UserList';