Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – If condition inside the useEffect isn't working

const [formData, setFormdata] = useState({});
path = "abc"  // path is a string passed as prop
useEffect(() => {
  // console.log('Table component rendered');
  
  if (formData[path] === undefined) {
    serviceProvider(
      ctx,
      uischemaData,
      {
        event: { _reactName: "onLoad" },
        path,
        ...uischemaData.additionalData,
      }
    ).then((res: any) => {
      const fetchedData = res[path]?.map((e) => {
        return e;
      });
      setFormdata((pre) => {
        return {
          ...pre,
          [path]: fetchedData,
        };
      });
      setTableData(fetchedData || []);
    });
  }

I want to call the function name serviceProvider when formData[path] === undefined and when the component mounts, but the problem is when the formData[path] equals to undefined(checked on debugger) then it does not go inside the if condition.How’s that even possible?

Basically this useEffect calls an API through the serviceProvider function on component(Table) mount and res is stored in the formData, so another time the same table is rendered then it does not need to call the API again.

Tags:

2

Answers


  1. 0 
     import { useEffect, useState } from 'react';
 const Table = ({ path }) => {
 const [formData, setFormdata] = useState({});
 const [tableData, setTableData] = useState([]);

useEffect(() => {
if (formData[path] === undefined) {
  serviceProvider(
    ctx,
    uischemaData,
    {
      event: { _reactName: "onLoad" },
      path,
      ...uischemaData.additionalData,
    }
  ).then((res) => {
    const fetchedData = res[path]?.map((e) => e);
    setFormdata((prev) => ({
      ...prev,
      [path]: fetchedData,
    }));
    setTableData(fetchedData || []);
  }).catch((error) => {
    console.error('Error fetching data:', error);
  });
}
}, [path, formData]);
return (
 <div>
   {
   tableData.map((item, index) => (
     <div key={index}>{item}</div>
   ))}
 </div>
);
};
export default Table;
    Login or Signup to reply.
  2. 0

    The below code snippet works, please check:

    import React, { useState, useEffect } from 'react';
import './style.css';

export default function App() {
  const [formData, setFormdata] = useState({});
  let path = 'abc';

  useEffect(() => {
    if (formData[path] === undefined) {
      console.log('path does not exist');
      setFormdata((pre) => {
        return {
          ...pre,
          [path]: 'hello',
        };
      });
    } else console.log('path exist');
  }, []);

  console.log(formData);

  return <div></div>;
}

    The above code snippet is pretty straightforward implementation of the code provided in the question.
    Please check your implementation of the function serviceProvider.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search