CODEWITHSUNDEEP
reactjsreact-hooksuse-effectuse-state
AnushaReddy
AnushaReddy

Reputation: 43

React Hooks unable to update state

I'm trying to update state from API response. Getting response from API but it is not updating to state.I tried useEffect as componentDidUpdate but the component is rendering continuously. i want to render only single time. Below is the code snap,

// I want to update to lookup data
 const [lookUpData, setLookUpdata] = useState({
    BlueLaws: [],
    Departments: [],
    ProdCodes: [],
    Fees: [],
    IdChecks: [],
    IndustryStandards: [],
    Tax: []
  })
// calling getLookUpdata from useEffect()
useEffect(() => {
    getLookUpdata();
  }, []);

// Defination of getLookUpdata method
const getLookUpdata = () => {
    var postData = {};
    postData.storeID = "xxxx";
    postData.posType = 0;
    axios.post(url, postData).then(res => {
      if (res.status === 200 && res.data.response && res.data.response.length > 0) {
       res.data.response[0].blueLaws.length > 0 && setLookUpdata({ ...lookUpData, BlueLaws: res.data.response[0].blueLaws[0].blueLaws })
        res.data.response[0].departments.length > 0 && setLookUpdata({ ...lookUpData, Departments: res.data.response[0].departments[0].departments })
        res.data.response[0].departments.length > 0 && setLookUpdata({ ...lookUpData, ProdCodes: res.data.response[0].departments[0].prodCodes })
        res.data.response[0].fees.length > 0 && setLookUpdata({ ...lookUpData, Fees: res.data.response[0].fees[0] })
        res.data.response[0].idChecks.length > 0 && setLookUpdata({ ...lookUpData, IdChecks: res.data.response[0].idChecks[0].ageValidations })
        res.data.response[0].industryStandards.length > 0 && setLookUpdata({ ...lookUpData, IndustryStandards: res.data.response[0].industryStandards[0].industryStandards })
        res.data.response[0].tax.length > 0 && setLookUpdata({ ...lookUpData, Tax: res.data.response[0].tax[0].taxRates })
      } else if (res.status === 409) {
        console.log(res.data.error)
      }
    }).catch(err => {
      console.log(err);
    })

  }

Upvotes: 1

Views: 70

Answers (2)

Fábio BC Souza
Fábio BC Souza

Reputation: 1220

make sure that you are calling right nested array and objects (do you need data.response[0]?... so on..), if ok, try something like:

// I want to update to lookup data
  const [lookUpData, setLookUpdata] = useState({
    BlueLaws: [],
    Departments: [],
    ProdCodes: [],
    Fees: [],
    IdChecks: [],
    IndustryStandards: [],
    Tax: [],
  });

  // calling getLookUpdata from useEffect()
  useEffect(() => {
    async function getLookUpdata() {
      var postData = {};
      postData.storeID = 'xxxx';
      postData.posType = 0;

      try {
        const {data} = await axios.post(url, postData);
        data.response[0].blueLaws.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            BlueLaws: data.response[0].blueLaws[0].blueLaws,
          });
        data.response[0].departments.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            Departments: data.response[0].departments[0].departments,
          });
        data.response[0].departments.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            ProdCodes: data.response[0].departments[0].prodCodes,
          });
        data.response[0].fees.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            Fees: data.response[0].fees[0],
          });
        data.response[0].idChecks.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            IdChecks: data.response[0].idChecks[0].ageValidations,
          });
        data.response[0].industryStandards.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            IndustryStandards:
              data.response[0].industryStandards[0].industryStandards,
          });
        data.response[0].tax.length > 0 &&
          setLookUpdata({
            ...lookUpData,
            Tax: data.response[0].tax[0].taxRates,
          });
      } catch (error) {
        console.log(error);
      }
    }

    getLookUpdata();
  }, []); // <<<< make sure if you will need the dependency

Upvotes: 1

Or Assayag
Or Assayag

Reputation: 6356

In the useEffect code:

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

You need to declare on the [] array which variables to watch, and each time they update, there will be re-render process of the component.

Upvotes: 0

Related Questions