每当我尝试运行我的React应用时,都会不断出现以下错误:
TypeError:无法读取null的属性“ items”
它似乎源于以下代码:
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { graphql, compose, withApollo } from "react-apollo";
import QueryAllClients from "../GraphQL/QueryAllClients";
import MutationDeleteClient from "../GraphQL/MutationDeleteClient";
class AllClients extends Component {
state = {
busy: false,
}
static defaultProps = {
clients: [],
deleteClient: () => null,
}
async handleDeleteClick(client, e) {
e.preventDefault();
if (window.confirm(`Are you sure you want to delete client ${client.id}`)) {
const { deleteClient } = this.props;
await deleteClient(client);
}
}
handleSync = async () => {
const { client } = this.props;
const query = QueryAllClients;
this.setState({ busy: true });
await client.query({
query,
fetchPolicy: 'network-only',
});
this.setState({ busy: false });
}
renderClient = (client) => (
<Link to={`/client/${client.id}`} className="card" key={client.id}>
<div className="content">
<div className="header">{client.name}</div>
</div>
<div className="content">
<p><i className="icon calendar"></i>{client.address}</p>
<p><i className="icon clock"></i>{client.phoneNumber}</p>
<p><i className="icon marker"></i>{client.allegedOffenses}</p>
</div>
<div className="extra content">
<i className="icon comment"></i> {client.comments.items.length} comments
</div>
<button className="ui bottom attached button" onClick={this.handleDeleteClick.bind(this, client)}>
<i className="trash icon"></i>
Delete
</button>
</Link>
);
render() {
const { busy } = this.state;
const { clients } = this.props;
return (
<div>
<div className="ui clearing basic segment">
<h1 className="ui header left floated">All Clients</h1>
<button className="ui icon left basic button" onClick={this.handleSync} disabled={busy}>
<i aria-hidden="true" className={`refresh icon ${busy && "loading"}`}></i>
Sync with Server
</button>
</div>
<div className="ui link cards">
<div className="card blue">
<Link to="/newClient" className="new-event content center aligned">
<i className="icon add massive"></i>
<p>Create new client</p>
</Link>
</div>
{[].concat(clients).sort((a, b) => a.when.localeCompare(b.when)).map(this.renderClient)}
</div>
</div>
);
}
}
export default withApollo(compose(
graphql(
QueryAllClients,
{
options: {
fetchPolicy: 'cache-first',
},
props: ({ data: { listClients = { items: [] } } }) => ({
clients: listClients.items
})
}
),
graphql(
MutationDeleteClient,
{
options: {
update: (proxy, { data: { deleteClient } }) => {
const query = QueryAllClients;
const data = proxy.readQuery({ query });
data.listClients.items = data.listClients.items.filter(client => client.id !== deleteClient.id);
proxy.writeQuery({ query, data });
}
},
props: (props) => ({
deleteClient: (client) => {
return props.mutate({
variables: { id: client.id },
optimisticResponse: () => ({
deleteClient: {
...client, __typename: 'Client', comments: { __typename: 'CommentConnection', items: [] }
}
}),
});
}
})
}
)
)(AllClients));
该错误似乎来自graphql查询函数中的“ clients:listClients.items”,但是我已经尝试了遍历代码,但似乎找不到item属性的任何问题。看完SO之后,这似乎是一个常见的问题,但是有几种不同的潜在解决方案,到目前为止,所有这些解决方案都不适用于我。
该如何解决?