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';

ReactJS查询变量

TypeError：this.props.ObjectQuery不是函数

1 个答案: