Question

我正在return内部的graphql中进行查询，并且我看到数据似乎一切正常。但是，要求是我希望数据以我的状态存储，而不是简单地呈现项目。

  componentDidMount(){
    this.broadcasters();
     );
broadcasters =()=>{
    <Query query={BROADCASTERS_QUERY}>

            {
                ({loading,error,data}) =>{

                    if(error) console.log(error)
                    console.log("graphql data is ",data);
                    debugger
              }
            }

           </Query>

  }

在执行上述操作时，出现此错误。期望一个赋值或函数调用，而是看到一个表达式no-unused-expressions 我担心的是，我们如何才能将即将到来的数据存储在状态中。

Answer 1

解决方案是编写一个HOC，该HOC可以呈现您的组件并将值作为prop传递

class MyComponent extends React.Component {
  render() {
     const {loading,error,data} = this.props;
     //
  }

}
export default (props) => {
   <Query query={BROADCASTERS_QUERY}>
        {
             (data) =>{
                   return <MyComponent {...props} {...data}/>
              }
         }
    </Query>
}

使用来自graphql的数据进行设置状态

1 个答案: