У меня есть базовое сомнение относительно контекста API.Можем ли мы использовать компонент Context.consumer за пределами context.provider?
У меня есть компонент с двумя тегами select с одинаковыми параметрами.Я обернул первый выбор с помощью провайдера контекста и получил данные как таковые:
<DataProvider loadRestarantsOnWillMount {...this.context}>
<select className="select_Restaurent float-right "
defaultValue=""
>
<option>All Restaurants</option>
<DataContext.Consumer>
{({ restarants }) => {
return (
restarants &&
restarants.map((r, idx) => (
<option value={r.id} key={String(idx)}>
{r.name}
</option>
))
);
}}
</DataContext.Consumer>
</select>
</DataProvider>
Теперь второй тег выбора находится внутри модального загрузчика, и чтобы получить список ресторанов, я попытался обернуть этот выбор с помощьюcontext.consumer,
<DataContext.Consumer>
{({ restarants }) =>
restarants &&
restarants.map((r, idx) => (
<option value={r.id} key={String(idx)}>
{r.name}
</option>
))
}
</DataContext.Consumer>
, но не получают здесь реставранты.
контекст определен в отдельном файле, и реставранты загружаются из api onComponentWillmount компонента DataProvider, если я обертываювторой потребитель с <DataProvider>
снова, я думаю, что снова будет ненужный вызов API.
Итак, могу ли я получить доступ к потребителю вне поставщика?или мне нужно обернуть всю страницу в <DataProvider>
?, чего я пытаюсь избежать, только для двух небольших тегов выбора.
Кстати, весь компонент уже имеет другой контекст, установленный с static contextType
, поэтому я не могу использовать Datacontext в качестве контекста компонента.