Блог

Внутри элемента App.js I есть Items элемент react , и он возвращает Item.js элемент. Внутри Item.js я пытаюсь получить данные от поставщика, но у меня ничего не получается.

App.js

       import logo from './logo.svg';
      import './App.css';
      import '../src/Items'
      import Item from '../src/Item';
      import {useEffect,useState} from 'react'
      import Items  from '../src/Items';
      import ItemContext from './Context';


   function App() {
     const [isLoaded,setloaded] = useState(false);
     const [movielist,setMovieList] =  useState('');
     var arrdata = [];

    useEffect(()=>{
    fetch ("https://react-http-bcc2a-default-rtdb.firebaseio.com/meals.json")
    .then(data=>data.json())
    .then((data)=>{
      for( const key in data ){
           arrdata.push({
           title:data[key].title,
           id:key,
            price:data[key].price
            })
         }
        return arrdata;
    })
    .then((arrdata)=>{
    setMovieList(arrdata.map((movie)=>{
      return <Item price = {movie.price} title = {movie.title}> </Item>

    })
    )
     setloaded(true);
     console.log(movielist)
    })
   
},[])

     if(isLoaded){
       return <> 
       <ItemContext.Provider value={ {title:'new string',price :'40'}}> // here I am using  the Provider
    <Items> </Items>
      </ItemContext.Provider>
    </>
 


      }
     else{
       return <> <div>...loading</div></>
     }

   }

   export default App;
 

Items.js

      import Item  from '../src/Item';
     import { useReducer,useEffect } from 'react';


     export default function Items(){
         return  <>
         <Item> </Item>     //Item  js
                 </>

        }
 

Вложенные Item.js

импорт ItemContext из ‘./Контекста’;

      export default function Item (props){
      return (
      <ItemContext.Consumer>                  //consumer
        {(ctx)=>{
         <>
         <div>{ctx.price}</div>
         <div>{ctx.title}</div>
         </>
        }}
    </ItemContext.Consumer>

   )
 }
 

Context.js

   import React  from "react";

  const  ItemContext = React.createContext({
   title:'default',
   price:'10'

})
 export default ItemContext;
 

Я не понимаю ваш код ,пожалуйста, добавьте более подробную информацию

    function App() {
     // u don't need isLoaded u can know if movielist.length > 0
     const [movielist,setMovieList] =  useState([]);


    useEffect(()=>{
      (async() => {
        const response = await fetch("https://react-http-bcc2a-default-rtdb.firebaseio.com/meals.json")
        const json = await response.json()
    

        const temp = []

        for(let key in json){
           temp.push(json[key])
        }

        setMovieList(temp)

    })()

   
},[])

     if(movielist.length > 0){
       return <> 
       <ItemContext.Provider value={movielist}> // here I am using  the Provider
         <Items> </Items>
      </ItemContext.Provider>
    </>
 


      }
     else{
       return <> <div>...loading</div></>
     }

   }