1
votes

Besoin d'une solution pour récupérer les données du tableau, puis les pousser à l'état en utilisant pour chaque

Besoin d'une solution pour récupérer les données de l'API, puis les pousser vers un état en utilisant l'instruction forEach uniquement

constructor() {
        super()
        this.state = {
            char: [],
            loading: false
        }
    }
componentDidMount() {
        this.setState({loading: true})
        fetch("/*someURL*/")
            .then(response => response.json())
            .then(data => {
               data.forEach(item =>{
                   this.setState({
                            loading: false,
                            char: this.state.char.push(item)
                })
            })
            })
    }
 render() {
        const text = this.state.loading ? "loading..." : this.state.character.data

        return (
            <div>
                <p>{text}</p>
            </div>
        )
    }}

les données de mon URL sont: p >

{"page": 1, "per_page": 6, "total": 12, "total_pages": 2, "data": [{"id": 1, "email": "@ reqres.in "," first_name ":" abc "," last_name ":" cba "}, {" id ": 2," email ":" @ reqres.in "," first_name ":" def "," last_name ":" fed "}, {" id ": 3," email ":" @ reqres.in "," first_name ":" ghi "," last_name ":" ihg "}, {" id ": 4," email ":" t@reqres.in "," first_name ":" jkl "," last_name ":" lkj ""}, {"id": 5, "email": "@ reqres.in", "first_name" : "mno", "last_name": "onm"}, {"id": 6, "email": "@ reqres.in", "first_name": "pqr", "last_name": "rqp"}]}

Et peut utiliser l'instruction forEach n'importe où pour obtenir les données correctement

reactjs foreach fetch push

6 commentaires

Donc, vous voulez simplement ajouter les nouveaux caractères de données ou remplacer l'état de char après la récupération?

Je souhaite ajouter de nouvelles données aux caractères sans les remplacer après chaque extraction

quelqu'un avait déjà fourni la réponse.

Mais j'en ai besoin en utilisant la boucle forEach

pourquoi avez-vous besoin de chacun? modifiez-vous chaque élément avant de l'ajouter à l'état char ?

J'en ai besoin de l'utiliser dans une table sans utiliser de carte

3 Réponses :

0
votes

Vous pouvez utiliser opérateur de diffusion et le faire simplement.

.then(data => {
const {char} = this.state;

this.setState({
  loading: false,
  char: [...char, ...data]

})

})

0 commentaires

3
votes

Essayez plutôt ceci:

.then(result => {               
    this.setState({
        loading: false,
        ...result
    })
})

Mise à jour de la réponse pour qu'elle corresponde à toutes vos propriétés de votre réponse. Je suppose que this.state.char ne doit contenir que les données de result.data

//Notice that I changed the parameter name to result
.then(result => {               
    this.setState({
        loading: false,
        char: [...this.state.char, ...result.data],
        page: result.page,
        per_page: result.per_page,
        total: result.total,
        total_pages: result.total_pages
    })
})

Sinon, vous pouvez simplement déplier l'objet entier:

...
.then(data => {               
    this.setState({
        loading: false,
        char: [...this.state.char, ...data]
    })
})
...

Mais alors votre tableau ne sera pas stocké dans this.state.char mais plutôt dans this.state.data

Pour plus d'informations sur l'opérateur de diffusion ... vous pouvez consulter ici .

TLDR; Fondamentalement, il prend n'importe quel objet ou tableau {name: "Dennis", age: 29} le déplie et le fusionne avec l'objet dans lequel vous le répandez "dans":

const myObj = {... {name: "Dennis", age: 29 "}, email:" myemail@example.com "}

const myObj = {name: "Dennis", age: 29, email: "myemail@example.com"}

2 commentaires

Je n'en reçois pas de sortie. son montrant cette erreur: "Rejet non géré (TypeError): les données ne sont pas itérables". puis j'ai utilisé "char: [... this.state.char, ... data.data]". Désormais, la sortie n'affiche que l'objet "data" et ne montre pas les objets restants tels que page, per_page, etc.,

@ShashankGunaga J'ai mis à jour ma réponse. Permettez-moi de savoir comment cela fonctionne pour vous.

0
votes

Essayez comme ceci

[...this.state.char, ...result.data]

Le code ci-dessous utilisait l'opérateur de propagation pour concaténer les données d'état existantes avec les données nouvellement obtenues de l'API. Il s'appelle l'opérateur spread (...).

fetch("/*someURL*/")
.then(response => response.json())
.then(result => {
    this.setState({
       loading: false,
       char: [...this.state.char, ...result.data]
    })
 })

Pour plus de détails, reportez-vous à ce lien https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

1 commentaires

la sortie n'affiche que l'objet "data" et ne montre pas les objets restants tels que page, per_page, etc., dans les données de l'API