React Context API, загрузка данных дважды. Один раз с данными, а другой без - PullRequest
Новая
       144

React Context API, загрузка данных дважды. Один раз с данными, а другой без

0 голосов
/ 06 августа 2020

Вот как я создал контекст для простой программы, которую пишу 

import React, { useState, createContext, useEffect } from "react";

export const PhotoContext = createContext();

export const PhotoProvider = (props) => {
  const [photo, setPhoto] = useState([]);

  useEffect(() => {
    console.log("Use Effect Runs  HAHAHAH");
    console.log("HAHAHAHAHAHAHAH");
    fetchPhotos();

    async function fetchPhotos() {
      const url =
        "https://raw.githubusercontent.com/bobziroll/scrimba-react-bootcamp-images/master/images.json";

  

      fetch(url)
        .then((res) => res.json())
        .then((arr) => {
          setPhoto(arr);
        })
        .catch(console.log("ERROR"));
    }
  }, []);

  return (
    <PhotoContext.Provider value={[photo, setPhoto]}>
      {props.children}
    </PhotoContext.Provider>
  );
};

Есть еще один файл, в который я хочу загрузить данные в переменную фотографий. Вот код для этого. Я использовал setTimeout, чтобы увидеть, в чем именно проблема. Кажется, что всякий раз, когда выполняется инструкция в setTimeout, значение в консоли возвращается дважды. Во-первых, он пуст, а у второго есть актуальное значение. Но поскольку я пытаюсь получить доступ к photos.url, и поскольку в первый раз он не определен, программа рушится. 

import React, { useState, useContext } from "react";
import { PhotoContext } from "../Context/PhotoContext";

const Photos = (props) => {
  const [photos, values] = useContext(PhotoContext);

  setTimeout(() => {
    console.log(photos[0].url);
  }, 3000);
  return <div>{}</div>;
};

export default Photos;

Помощь будет очень признательна.

1 Ответ

0 голосов
/ 07 августа 2020

Не видел проблемы. Я создал песочницу для вашего примера. https://codesandbox.io/s/inspiring-lovelace-5r1gb?file= / src / App. js

...