反应副本查询数据结果为空数组

问题描述

我正在使用apollo客户端从BE获取数据。我获取的数据想复制到一个新的数组中，这样我就可以处理给定的数据。我尝试的所有结果都变成了一个空数组。 有人看到我在不断取回一个空数组吗？

我试图映射数据并将其推入新数组，如下所示：

organisation=[];
render(){
return(
      <div  id="public">
        <Query query={GET_ORGANIZATION} variables={{ id }} >
          {({ loading,error,data }) => {
            if (loading) return <span class="sr-only">Loading...</span>
            if (error) return <div>Error</div>
            if (data) {
              if (data.getorganization.length >= this.organization.length) {
                data.getorganization.map(company => this.organization.push({
                  id: company.id,name: company.name,street: company.street,addings: company.addings,zipCode: company.zipCode,country : company.country,houseNumber : company.houseNumber,}))

              }return (
                <React.Fragment>
                   {console.log("data",data.getorganization)}
                  {console.log("organization",this.organization)}
                  
                    <div >
                      <p>{this.organization.name}</p>
                    </div>
                 </React.Fragement>
                   )}}
          </Query>

     </div>
)}

我也尝试过： this.organization = [...data.getorganization]

全部出现。

解决方法

您要在异步调用之后操作数组值，因此该值应为“状态”，以便组件在更改时重新呈现。为此，请将您的组织变量声明更改为

state = {
    organisation=[]
};

和您的渲染方法

render(){
    return(
      <div  id="public">
        <Query query={GET_ORGANIZATION} variables={{ id }} >
          {({ loading,error,data }) => {
            if (loading) return <span class="sr-only">Loading...</span>
            if (error) return <div>Error</div>
            if (data) {
              if (data.getOrganization.length >= this.organization.length) {
                setState({
                  organisation: data.getOrganization.map(company => ({
                  id: company.id,name: company.name,street: company.street,addings: company.addings,zipCode: company.zipCode,country : company.country,houseNumber : company.houseNumber,}))
               });

              }
         return (
                <React.Fragment>
                   {console.log("data",this.organisation)}
                  {console.log("organization",this.organisation)}
                  
                    <div >
                      <p>{this.organization.name}</p>
                    </div>
                 </React.Fragment>
                   )}}
          </Query>

     </div>
)}