来自 React UseContext 的数据在一段时间内未定义答案

【问题标题】：data from React UseContext is undefined for a period来自 React UseContext 的数据在一段时间内未定义
【发布时间】：2020-04-28 09:51:30
【问题描述】：

const [districtData] = useContext(DistrictDataContext);
    console.log(districtData); //undefined then available
    return (
        <Row>
            <Col md={{ span: 6, offset: 3 }} style={{ height: "50vh" }}>
                {" "}
                <GoogleMapReact
                    bootstrapURLKeys={{
                        key: "#",
                    }}
                    defaultCenter={{ lat:#, lng: #}}
                    defaultZoom={10}>
                    {districtData.map(function (item) {//undefined})}
                </GoogleMapReact>
            </Col>
        </Row>
    );

当我尝试 console.log 时，我的反应上下文数据在一段时间内仍未定义。但它会在短短一秒后记录下来，但到那时我的map higher order function 已经失败了。我不知道如何处理这个问题。我正在考虑使用useEffect，但useEffect 已经在context provider 中应用以在组件上运行并安装。我试图通过检查districtData 是否一开始可用来解决它：

{districtData && districtData.map(function (item) {
return <MarkerComponent details={item} />;
})}

这给出了Expected an assignment or function call and instead saw an expression no-unused-expressions，这很奇怪，因为它为什么期待分配？编辑这是因为我没有返回地图功能。但数据仍然不存在。为什么 console.log 一开始是未定义的。这会导致问题吗？

【问题讨论】：

你在哪里设置上下文？注意：直到所有子级都挂载后才会挂载父级，因此可能是生命周期问题。所以你可能需要返回，直到 DistrictData 没有未定义 - 如果你依赖它
我在App 组件中设置我的上下文，就像function App() { return ( <Container fluid> <DistrictDataProvider> <Map /> </DistrictDataProvider> </Container> ); }
使用 lodash 函数检查数据是否存在或已定义，试试这个{_.isNull(districtData) && districtData.length && districtData.map(function (item) { return <MarkerComponent details={item} />; })}

标签： javascript reactjs react-context

【解决方案1】：

{districtData && districtData.map(function (item) {
return <MarkerComponent details={item} />;
})}

如果districtData 未定义、为空等，将尝试渲染false。可以用空数组替换。

{(districtData || []).map(function (item) {
return <MarkerComponent details={item} />;
})}

Expected an assignment or function call and instead saw an expression no-unused-expressions 将带括号消失：

{(districtData || []).map(function (item) {
return (<MarkerComponent details={item} />);
})}

【讨论】：