React复制查询数据结果为空数组

Question

我使用apollo客户端进行react从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]

一切都来了。

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