данные из 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>
    );

Мои данные контекста реагирования остаются неопределенными некоторое время, когда я пытаюсь его утешить. Но он регистрируется через короткую секунду, но к этому времени мой 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 не определен. Это когда-нибудь вызовет проблемы?

Answer 1

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

Попытается отрендерить false в случае, если districtData не определено, null et c. Может быть заменен на пустой массив.

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

Expected an assignment or function call and instead saw an expression no-unused-expressions уберет go с круглыми скобками:

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