反应复制查询数据导致空数组答案

【问题标题】：React copy query data results in empty array反应复制查询数据导致空数组
【发布时间】：2020-08-15 21:24:55
【问题描述】：

我正在使用 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]

一切都来了。

【问题讨论】：

你确定你需要 this.organisation 而不仅仅是组织

标签： javascript arrays reactjs copy apollo-client

【解决方案1】：

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

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>
)}

【讨论】：