I made a API request:
const [animes, setAnimes] = useState([]);
useEffect(() => {
axios
.get("https://api.jikan.moe/v4/anime/38000/characters")
.then((response) => {
setAnimes(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
when I do console.log(animes) I receive the data with a array of 76 items. But, when I do:
<div className="container">
{!!animes.length &&
animes?.slice(0, 9).map((anime, index) => {
return (
<img
key={index}
src={anime.image_url}
alt={anime.name}
/>
);
})}
</div>
I can't get the img and the alt. The console.log result is a object with a array inside. But if I use "setAnimes(response.data.data)" I receive just the array and even with this I can't get the content.
If I console.log(setAnimes) I receive this:
function dispatchSetState(fiber, queue, action) {
{
if (typeof arguments[3] === 'function') {
error("State updates from the useState() and useReducer() Hooks don't support the "
'second callback argument. To execute a side effect after ' 'rendering, declare it
in the component body with useEffect().');
}
}
var lane = requestUpdateLane(fiber);
var update = {
lane: lane,
action: action,
hasEagerState: false,
eagerState: null,
next: null
};
What I'm doing wrong?
CodePudding user response:
That's because the anime object doesn't contain image_url
or name
properties.
It just contains these properties
- character: Object
- role: string
- voice_actors: Array
Check console.
https://codesandbox.io/s/tender-hopper-ytxkvc
CodePudding user response:
You're looking for image_url and name in the wrong object.
use anime.character.images.jpg.image_url
and anime.character.name
to refer to correct
properties