Hi i have this function for rendering page, i wanna have function submenu, what will be generating dynamically submenus for my pages. I need get first id from outer function and after it fetch data for submenu, but useEffect in Submenu dont fetch data.

import Submenu from '../Submenu.js'
import React, {useEffect, useState} from 'react';
import * as myUtilities from '../Utilities';


function InfoForPatPage (props) {

  const [Obsah,setObsah] = useState([]);
  const [image,setimage] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [id, setId] = useState("");
  
  const loadAsyncData = async () => {
  
    setIsLoading(true);
    setError(null);
    
    try {
      const resp = await fetch(myUtilities.translateApiUrl("/pages/?type=web.InfoForPatientsPage")).then(r=>r.json());
      const id = await resp.items[0].id;
      const data = await fetch(myUtilities.translateApiUrl("/pages/" id "/")).then(r=>r.json());
      const img = await data.banner.meta
      console.log(id)
      setObsah(data);
      setimage(img)
      setId(id)
      setIsLoading(false);
    } catch(e) {
      setError(e);
      setIsLoading(false);
    }
    
}


  useEffect(() => {
    
  loadAsyncData();

}, []);


  


    
    return (........

<Submenu id={ id } />


      )
    }
export default InfoForPatPage;

and this inner function

import React, {useEffect, useState} from 'react';
import * as myUtilities from './Utilities';

function Submenu (props) {

  const [Obsah,setObsah] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  

  
  const id = props.id

  const loadAsyncSubmenu = async () => {
  
    setIsLoading(true);
    setError(null);
    
    try {
      console.log(url)
      const short_url = "/pages/?child_of="   id  "&fields=_,id"
      const url = myUtilities.translateApiUrl(short_url)
      console.log(url)
      const resp = await fetch(url).then(r=>r.json());
      console.log(resp)
      const childs = []

      for (let index = 0; index < resp.items.length; index  ) {
        const page_short_url = "/pages/"  resp.items[index].id  "/?fields=_,title,ikona"
        const page_url = myUtilities.translateApiUrl(short_url)
        const child = await fetch(url).then(r=>r.json());
        childs.push(child)}

      console.log(childs)
     
      setObsah(childs);
      setIsLoading(false);
    } catch(e) {
      setError(e);
      setIsLoading(false);
    }

    useEffect(() => {
    
        loadAsyncSubmenu();
      
      }, []);

    
        return (
            <div  id="buttons">
                {Obsah.map ( item => ( <div > <img src={item.ikona.meta.download_url} /> 
                
          
            <a href="{{ child.get_url }}#buttons" />
      
           </div>
          
          ))}
          </div>)}}
    
    




export default Submenu;

But inner Useeffect dont start, if i delete try and try it without try, it gimmy error that id is undefined. Can anybody help with me with idea, how start inner useeffect after i have fetch all data from my outer useeffect

CodePudding user response：

Your second useEffect has some flaws. Thats the problem.

useEffect(() => {
    if (!id) {
        return;
    }
    loadAsyncSubmenu();
}, [id]);

At first: At the start your id is an empty string. So you probably don't want to start a request in your child component. Or better: dont render the child component at all.

Second: After your parent component update the id changes. But your child component doesn't listen to it. so we add id as a dependency.