Impossible d'obtenir les éléments de tableau précédemment déclarés pour l'utiliser dans render avec ReactJS

Question

J'ai déjà reçu un tableau d'une API avec fetch. Je l'ai enregistré dans un "ids" variale. Le problème est que la variable "ids" est vide dans le rendu. Comment puis-je voir les valeurs précédemment déclarées que je sauvegarde dans la variable "ids"?

Ceci est mon code actuel.

import React, { Component } from 'react'; 
import ReactSVG from 'react-svg'; 
import logo from './logo.svg'; 
import avatar from './avatar.jpg' 
import './component.css' 

import Msg from './components/Msg'; 
import ItemMsg from './components/ItemMsg'; 
import Sidebar from './components/Sidebar'; 
var ids = []; 
var componente = []; 

class App extends Component { 


    componentDidMount() { 
    fetch('/todos/ids') 
    .then((response) => response.json()) 
    .then((responseJson) => ids = responseJson.data) 
    .then(console.log) 
    } 

    render() { 

    var id; 

    for (var i = 0; i < ids.length; i++) { 
     id = ids[i]; 
     componente.push(<li><ItemMsg idfromparent={id}/></li>); 
    } 

    return (
     <div> 
     <Sidebar/> 
     <Msg/> 
     <ul> 
      {componente} 
     </ul> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

Essayez quelque chose comme:

import React, { Component } from 'react'; 
import ReactSVG from 'react-svg'; 
import logo from './logo.svg'; 
import avatar from './avatar.jpg' 
import './component.css' 

import Msg from './components/Msg'; 
import ItemMsg from './components/ItemMsg'; 
import Sidebar from './components/Sidebar'; 

class App extends Component { 
    componentDidMount() { 
    fetch('/todos/ids') 
    .then((response) => response.json()) 
    .then((responseJson) => this.setState({ids: responseJson.data})) 
    .then(console.log) 
    } 

    render() { 
    var ids = this.state && this.state.ids ? this.state.ids : []; 
    var componente = []; 
    for (var i = 0; i < this.state.ids.length; i++) { 
     componente.push(<li><ItemMsg key={ids[i]} idfromparent={ids[i].ID_Publicacion}/></li>); 
    } 

    return (
     <div> 
     <Sidebar/> 
     <Msg/> 
     <ul> 
      {componente} 
     </ul> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 2

Votre problème n'est pas que la valeur de la liste ids est pas mis à jour, il est. Le problème ici est que votre composant n'a aucune raison de re-rendre basé sur le changement de cette variable, même si elle l'utilise dans son rendu. La seule façon de déclencher un rendu d'un composant consiste à appeler le setState.

Pour ce faire, utilisez le hook componentDidMount lifecycle. Faites l'appel asynchrone, puis appelez setState. Le composant est rendu de nouveau et la valeur remplie pour state.users est utilisée.

Voici un exemple inventé. Je crois que vous pouvez l'adapter à votre cas:

class App extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     users: [] 
    }; 
    } 

componentDidMount() { 
    fetch('/users') 
    .then(users => this.setState({ users }); 
} 

render() { 
    return (
    <ul> 
     { 
     this.state.users && this.state.users.map(user => <li> { user.name } </li>); 
    } 
    </ul> 
    ); 
    } 
}