Блог

до того, как у меня возникла эта проблема, я использовал redux, там эта проблема не возникала. Теперь, когда я изменил свой подход, я столкнулся с этой проблемой.

На своей домашней странице я решил извлечь нужные мне данные и сохранить их в sessionStorage, затем, когда пользователь нажимает на продукт, перенаправляется на шаблон, где я просто хочу заполнить значения.

Всякий раз, когда я ввожу объект, подобный data.title, я получаю undefined (я знаю это, потому что useEffect запускается после цикла рендеринга). Как мне следует поступить здесь?

Либо я выбираю значения из sessionStorage, либо извлекаю его, пожалуйста, смотрите Мой код для useEffect:

  useEffect(() => {
try {
  if (
    sessionStorage.length > 0 amp;amp;
    sessionStorage.getItem(title).length > 0
  ) {
    
    const nData = JSON.parse(sessionStorage.getItem(title));
    const fData = filterProd(nData, id);
    setData(() => fData);
  } else {
    fetchFiles(`http://localhost:3000/api/prods?id=${id}`, setData);
  }
} catch (error) {
  history.push('/');
}
 }, []);
  

С этим подходом проблем нет, проблема начинается, когда я хочу использовать проанализированный массив / объект и уничтожить его.
Поскольку useEffect запускается после процесса рендеринга при первом запуске, он получит состояние по умолчанию, которое является пустым [] .
Я получаю массив propper после его анализа, он выглядит так:

[{ artcategory: "jacket" brand: "The North Face" category: "men" description: "Outdoorjacke" details: "Unterlegter Reißverschluss, Abdeckleiste, Zwei-Wege-Reißverschluss, Stickerei" folder: "newFall2020" id: "b77a14f0-fd25-11ea-95f1-ff14921ff326" photos: (3) ["/newFall2020/b7164a10-fd25-11ea-95f1-ff14921ff326-ja1.png", "/newFall2020/b71845e0-fd25-11ea-95f1-ff14921ff326-ja2.png", "/newFall2020/b77a14f0-fd25-11ea-95f1-ff14921ff326-ja3.png"] price: 291.95 rating: 0 size: (5) ["XS", "S", "M", "L", "XL"] subcategory: "clothing" title: "ZANECK JACKET UTILITY" }]

Внутри этого объекта у меня есть дополнительный массив, в котором я храню путь к изображениям.

В следующем я верну это в свой компонент:

  return (
<section className='prodPageWrapper'>
  <SmallProd
    c={data amp;amp; data.category}
    t={data amp;amp; data.title}
    p={data amp;amp; data.price}
    prodCd='prodPageDesc'
    idTitle={'pdp_title'}
    idDesc={'pdp_desc'}
    idPrize={'pdp_price'}
  />
  <Swiper data={data amp;amp; data} photos={data amp;amp; data.photos} />
  <ShowSizes fn={pickSize} r={sizePicked} />
  <AddToBasketMobile />
  <FavButton />
  <PDPDescription />
  <PushableMain />
  {/* <div id='test'>test</div> */}
</section>
);
  

Как я могу получить доступ к объекту, чтобы я мог его использовать, передавать и передавать дальше.
Заранее спасибо!

Если я правильно понял, ваша проблема заключается в попытке использовать объект, который еще не определен. Если это так, мое предложение было бы примерно таким:

 function MyComponent() {
    const [data, setData] = useState([]);    

    useEffect(() => {
       if (localStorage) {
         // parse
       }
       else {
         // fetch
       }
       setData(data)
    })

    if (!data.length) return null; // do not render if empty

    return (
        <section ... />
    )
}
  

Это должно помешать любому дочернему объекту использовать ваш объект, кроме того, вы также можете вернуть счетчик или индикатор загрузки, в то время !data.length как значение true .

прежде всего, спасибо за предложение. Я обнаружил ошибку, прежде всего, это массив, и я ввел его как объект, поэтому данные. но вместо этого я должен сделать эти данные [0].

Это фактически решило проблему.

Однако спасибо!