State not updating from useEffect hook - Cannot read property 'title' of undefined - react-native

Question

I am trying to update the state in my component using useEffect
useEffect(() => {
async function fetchData() {
let response = await getAccountCoverTypes();
setData(response);
}
fetchData();
}, []);
I am setting my default value:
const [data, setData] = useState({
payload: { title: "", accountCoverTypes: [] },
And trying to map through the data
const {
payload: { title, accountCoverTypes },
} = data;
{accountCoverTypes.map((button, index) => (
...
))}
When I try and use the data - I get the error, Cannot read property title of undefined. How can update the state from useEffect?
My service call:
const call = async () => {
try {
const response = await getItem(xxx);
return response
}
json returned:
{
"payload": {
"title": "text here",
"accountCoverTypes": [
{
"title": "sample text",
"details": "sample text",
"link": "test"
},..
]
}
}

Answer 1

Here you go with a solution
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
let response = await getAccountCoverTypes();
setData(response);
}
fetchData();
}, []);
{
data &&
data.accountCoverTypes &&
data.accountCoverTypes.length &&
data.accountCoverTypes.map((button, index) => (
...
))}
Before looping or iterating through the data variable, you should check the presence of data.

Answer 2

Ok, when your function first time executed data value will be undefined, as you do not set any initial value for that state const [data, setData] = useState()//initial value is not set;
Your approach is absolutely correct in sense of updating data using setData function invoked from your useEffect hook. Once your async function executed - data will be updated and component will be rerendered

Answer 3

React relies on the order in which Hooks are called.https://reactjs.org/docs/hooks-rules.html
That means that after the useEffect runs, the useState reinitializes the data
So move the useState before the useEffect in your code
const [data, setData] = useState();
useEffect(() => {
async function fetchData() {
let response = await getAccountCoverTypes();
setData(response);
}
fetchData();
}, []);