TypeError：空扩展运算符不可迭代

Question

似乎无法修复这个零散布运算符，当我的慈善机构（从道具中解构）为空时，会发生这种情况。我如何最好地考虑这种情况？任何建议都很好。错误发生在onCompleted函数中。

const Causes = ({ causes, charities }) => {

const [charitiesList, setCharitiesList] = useState(charities);
const causeIds = _.map(causes.edges, i => i.node.databaseId);
var causeYoutubeIds

const { data, loading, error } = useQuery(GET_CHARITIES_BY_CAUSE, {
    variables: {
        "id": causeIds
    },
    onCompleted(dt) {
        const getCharitiesByCause = _.map(dt.charities.edges, i => ({ charity: i.node }));
        setCharitiesList([...charitiesList , ...getCharitiesByCause]);
    }
})

return (
    <div>
        <div className="columns is-multiline">
            <div className="column">
                <h2 className={styles.heading}>Charities Involved</h2>
                <div className={styles.causeContainer}>
                    {
                        charitiesList &&
                        charitiesList.map((item) => {
                            return (
                                <div className={styles.charityCard}>
                                    <Img src={item.charity.Charity.logo.mediaItemUrl} />
                                    {item.charity.title}
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    </div>
)

}

Answer 1

从表面上看。 useState(charities);此慈善团体即将无效。如果它应该有一个值，那么您需要对其进行修复。或者，您可以只添加一张支票。 useState(charities || []);