I did some research and I've learned that useState is asynchronous, although, I'm still not sure how to fix my particular issue. I need to fetch the data from an api, and the state only updates the second render, plus I need to get only 1 file, so just adding current new state to the previous one is probably not an option.
(the result is that it now says .map is not a function since useState is empty)
useEffect(() => {
axios.get(`http://localhost:8080/files/public/${id}`)
.then(res => {
console.log(res.data);
setFile(res.data);
})
}, []);
{
file.map((row, index) => {
return <li>{index}</li>
})
}
Edit: useState is actually initialized const [file, setFile] = useState([]);
One reason you could get this error is if you have initialised the file state without providing a value, meaning it has the value of undefined (but we would need to see how you're declaring the state to confirm that). As undefined is not a Prototype that has a native map property (or any properties), you cannot call the map property on the initial render.
You should be able to get rid of the error by initialising the state to an empty Array like this:
const [file, setFile] = useState([]);
Setting the initial state means that the first render will treat file as an empty Array, so you can call map on it and it will simply render nothing (as the Array is empty).
Sample Final Code:
const MyComponent = () => {
const [file, setFile] = useState([]);
useEffect(() => {
axios.get(`http://localhost:8080/files/public/${id}`).then((res) => {
console.log(res.data);
setFile(res.data);
});
}, []);
return (
<div>
{file.map((row, index) => {
return <li>{index}</li>;
})}
</div>
);
}
Update:
Another reason could be that the response you are getting from axios isn't an Array. In this case, it could be a solution to:
res.json() or res.text() on the axios response (so you aren't handling a response Object, but are in fact handling the data);'["comment 1","comment 2","etc..."]', you need to call JSON.parse on it first;{ data: { comments: [...] } } should be accessed with file.data.comments