In nested function second function is not working

Admin 1
Viewed 31

I created a useState hook to store the ID fetching from the first function., and the initial value of the hook is an empty string(''). But the problem is when I save the file two times the hook stores the ID that I have fetched otherwise it is completely empty.

 const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [id, setId] = useState(' ');

  const getCMSID = () => {
    let url = `${URL}/store-api/category`;
    let getId = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'sw-access-key': `${API_KEY}`,
      },
    };
    fetch(url, getId)
      .then(res => res.json())
      .then(json => setId(json.elements[0].cmsPageId))
      .catch(err => console.error('error:' + err));

    const getCMSPage = () => {
      const cmsUrl = `${URL}/store-api/cms/${id}`;
      let getcms = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
          'sw-access-key': `${API_KEY}`,
        },
      };
      fetch(cmsUrl, getcms)
        .then(res => res.json())
        .then(json => {
          setData(json.sections);
          setLoading(false);
        })
        .catch(err => console.error('Error:' + err));
    };
    getCMSPage();
  };
  useEffect(() => {
    getCMSID();
  }, []);
react-native react-hooks nested-function
2 Answers

Here I got the solution and it works.

  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const getCMSID = () => {
    let url = `${URL}/store-api/category`;
    let getId = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        'sw-access-key': `${API_KEY}`,
      },
    };
    fetch(url, getId)
      .then(res => res.json())
      .then(json => {
        getCMSPage(json.elements[0].cmsPageId);
      })
      .catch(err => console.error('error:' + err));

    const getCMSPage = gId => {
      const cmsUrl = `${URL}/store-api/cms/${gId}`;
      let getcms = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
          'sw-access-key': `${API_KEY}`,
        },
      };
      fetch(cmsUrl, getcms)
        .then(res => res.json())
        .then(json => {
          setData(json.sections);
          setLoading(false);
        })
        .catch(err => console.error('Error:' + err));
    };
  };
  useEffect(() => {
    getCMSID();
  }, []);

@credit Nayeem M. Muzahid

Admin1

useState hook is asynchronous. So do not set something using useState and use it inside the same function. As per your code, you can just use the ID directly without using the set value.

 const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
const [id, setId] = useState(' ');

const getCMSID = () => {
let url = `${URL}/store-api/category`;
let getId = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
    'sw-access-key': `${API_KEY}`,
  },
};
fetch(url, getId)
  .then(res => res.json())
  .then(json => { return setId(json.elements[0].cmsPageId)})
  .catch(err => console.error('error:' + err));

 const getCMSPage = () => {
  const cmsUrl = `${URL}/store-api/cms/${globalID}`;
  let getcms = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      'sw-access-key': `${API_KEY}`,
    },
  };
  fetch(cmsUrl, getcms)
    .then(res => res.json())
    .then(json => {
      setData(json.sections);
      setLoading(false);
    })
    .catch(err => console.error('Error:' + err));
};
 getCMSPage();
};
 useEffect(() => {
  getCMSID();
 }, []);

And use the value of the hook outside the function if you need it.

user_165734650
Related