javascript - React UseContext 中的数据在一段时间内未定义

Question

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 时，我的 react 上下文数据在一段时间内仍然未定义。但它会在短短一秒后记录，但那时我的 map 高阶函数已经失败。我不知道如何处理这个问题。我正在考虑使用 useEffect 但 useEffect 已在 contextprovider 中应用以在已安装的组件上运行。我尝试通过检查 districtData 是否可用来解决这个问题，如下所示:

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

这给出了预期一个赋值或函数调用，而是看到了一个表达式 no-unused-expressions 这很奇怪，因为为什么它期望一个赋值？ 编辑这是因为我没有在 map 功能中返回。但数据仍然不存在。为什么console.log一开始是未定义的。这会引起问题吗？

Answer 1

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

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

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

期望赋值或函数调用，但看到表达式 no-unused-expressions 将用括号消失:

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