Почему я не могу передать свое хранилище Mobx своему компоненту, но могу передать ему свойство? - PullRequest
Новая
       4

Почему я не могу передать свое хранилище Mobx своему компоненту, но могу передать ему свойство?

0 голосов
/ 10 февраля 2020

У меня есть этот компонент, который получает некоторые реквизиты, реквизиты приходят из магазина Mobx,

, когда я передаю их таким образом listings={store.restaurantResults[store.selectedFood]}, это работает, но если я передаю их таким образом listings={store} Его неопределено .

Есть идеи, как это исправить?

Компонент: 

const Restaurants = () => {
  const store = React.useContext(StoreContext);
  return useObserver(() => (
    <div className="mw8 center">
      <Header title="EasyLunch" subTitle="Find Pizza, Burgers or Sushi in Berlin the easy way" />
      <FixedMenu menuItem1={"Pizza"} menuItem2={"Burger"} menuItem3={"Sushi"} />
      <p className="b tc pt3">or...</p>
      <Search />
      <Listings listings={store.restaurantResults[store.selectedFood]} />
    </div>
  ))
}

Тогда компонент листинга выглядит следующим образом (см. Ниже),

и если я прохожу весь магазин, как listings={store}, я удаляю строку: const store = React.useContext(StoreContext); (потому что я получаю его как реквизит)

И я бы также изменил входящий реквизит с {listings} на {store} и вместо того, чтобы отображать это так:

listings.map((rest, i) => {...}

Я бы сделал это так:

store.restaurantResults[store.selectedFood].map((rest, i) => {...}

Но, как я уже сказал. .. если я прохожу весь магазин, он всегда не определен 

const Listings = ({listings}) => {

  const store = React.useContext(StoreContext);
  return useObserver(() => (
    store.loading
      ? <Loading />
      : <div className="pa2">
        <div className="flex flex-wrap">
          {listings &&
            listings.map((rest, i) => {
              return (
                <div key={i} className="pa2 listing">
                  <img className='object-fit' src={rest.image_url} alt="restuarant" />
                  <p>{rest.name}</p>
                  <p>{rest.location.address1}</p>
                </div>
              );
            })}
        </div>
      </div>
  ));
};

Любые советы?

...