React fetch multiple endpoints of API error TypeError: fetch(...).json is not a function-CodePudding

I am doing a React.js project. I am fetching data from an API and pass it from the parent component by props. Also, I am using different endpoints of the same API in this children component. I need to match the "characters/people" from the props, with the ones inside this new endpoint of the same API. I have a function that it seems to work, but I get two errors. The first one is not always, but sometimes in the console it shows error 429 too many API calls. I did a setTimeOut function that it seems it solved. But, now I have another error from the catch that says: TypeError: fetch(...).json is not a function. This is the code:

import styles from './MovieDetail.module.css';

const MovieDetail = ({ film }) => {

    const peoples = film.properties?.characters.map(async (characterURL) => {
        try {
            const people = await fetch(characterURL).json().results;
            if (people.ok) {
                setTimeout(() => {
                    return people;
                }, 1000)
            };
        }
        catch (err) {
            console.error('Error peoples', err)
        }
    })
    console.log('peoples MovieDetail', peoples)

    return (
        <div className={styles.card}>
            <div className={styles.container}>
                <h2>{film.properties?.title}</h2>
                <p>{film.description}</p>
                <p>Release date: {film.properties?.release_date}</p>
                <p>Director: {film.properties?.director}</p>
                <p>Producer: {film.properties?.producer}</p>
                <p>Characters:</p>
                {peoples?.map(people=> (
                    <ul id={styles.list}>
                        <li>{people.properties?.name}</li>
                    </ul>
                ))}
            </div>            
        </div>
    );
}
 
export default MovieDetail;

This is the whole code in sandbox. Thanks in advance.

CodePudding user response：

Try to await the json() call separately:

const peoples = film.properties?.characters.map(async (characterURL) => {
  try {
    const response = await fetch(characterURL);
    const data = await response.json();
    const people = data.results;
    if (people.ok) {
      setTimeout(() => {
        return people;
      }, 1000);
    }
  } catch (err) {
    console.error('Error peoples', err);
  }
});

CodePudding user response：

I've gone through your code, and there are few mistakes, that you're doing.

First is: You are passing your props named as films from your parent component and getting as film in your child component.

so change this in your ItemContainer/index.jsx

return <MovieDetail key={film?.properties?.episode_id} film={film} />;

and Second is: you need to await for your json as well:

so change this in your MovieDetail/Index.jsx

const peoples = film?.properties?.characters.map(async (characterURL) => {
  try {
    const response = await fetch(characterURL);
    const people = await response.json().results;
    if (response.ok) {
      setTimeout(() => {
        return people;
      }, 1000);
    }
  } catch (err) {
    console.error("Error peoples", err);
  }
});