TypeError：空传播运算符不可迭代答案

【问题标题】：TypeError: null spread operator is not iterableTypeError：空传播运算符不可迭代
【发布时间】：2020-05-12 06:15:31
【问题描述】：

似乎无法修复当我的慈善机构（从道具解构）为空时发生的这个空传播运算符。我如何最好地考虑这种情况？任何建议都会很棒。错误发生在 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>
)

}

【问题讨论】：

错误是什么？ Null 值通常在传播中被忽略
是的，我就是这么想的。我得到的错误是“TypeError: charitiesList is not iterable”
错误基本上是说charitiesList 或getCharitiesByCause 是不可迭代的。请 console.log 同时记录 typeof 以查看它们是否是可迭代类型
您可能没有传递对象或数组。请关注@AtinSingh 写的内容。\
嗯，所以当我 console.log(charitiesList, getCharitiesByCause) 我得到 -> null, [{...}, {...}]

标签： javascript reactjs react-apollo

【解决方案1】：

从它看起来的样子。 useState(charities);这个慈善机构即将无效。如果它应该有一个值，那么你需要修复它。或者您可以添加一张支票。 useState(charities || []);

【讨论】：

啊，解决了！没有意识到我可以在 useState 中有条件。非常感谢