Reputation: 43
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
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
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