RÉACTION: Appel d'une fonction dans une fonction de carte

Question

Voici la mise en page de base de l'objet que je utilise (être passé comme un accessoire à la pièce):

bigObject { 
    overview: { 
     *not being used for current concern* 
    }, 
    code: { 
     1: { 
      textArray: [*array of length 4 to 8*], 
      imgSrc: "string goes here" 
     }, 
     2: { 
      textArray: [*array of length 4 to 8*], 
      imgSrc: "string goes here" 
     }, 
     3: { 
      textArray: [*array of length 4 to 8*], 
      imgSrc: "string goes here" 
     }, 
    } 
} 

Mon constructeur:

constructor(props) { 
    super(props); 
    this.state = { 
     projectName: this.props.projectName, 
     info: bigObject[this.props.projectName] 
    } 
    this.renderInfo = this.renderInfo.bind(this); 
    this.renderText = this.renderText.bind(this); 

    console.log(this.state.info); 
} 

Ce que j'essaie de faire est de parcourir l'objet de code de sorte que pour chaque imgSrc, le tableau de texte dans l'objet avec lui est itéré pour créer des éléments de liste le long de la photo.

renderInfo() { 
    return Object.keys(this.state.info.code).map(function(key, index) { 
     return (
      <div className="code-snippet" id={name + key} key={key}> 
       <div className="code-description"> 
        <ul> 
         {() => this.renderText(key)} 
        </ul> 
       </div> 
       <div className="code-img"> 
        <img src={"/project-images/MongoScraper/" + placeholder[key].img} alt=""/> 
       </div> 
      </div> 
     ) 
    }); 
} 

Chaque img est rendu exactement ce que je veux, mais la méthode de renderText n'Itère l'tabLibellés comme je veux:

renderText(key) { 
    console.log("hello world") //doesn't log 
    let placeholder = this.state.info.code; 
    return placeholder[key].text.map(function(keyValue, index) { 
     return (
      <li>{placeholder[key].text[index]}</li> 
     ) 
    }); 
} 

La méthode render():

render() { 
    return (
     <div className="container code-descriptor-div"> 
      {this.renderInfo()} 
     </div> 
    ) 
} 

J'utilise une fonction fléchée lorsque j'appelle la méthode renderText en raison de problèmes de portée lexicale (les résultats "ne peut pas lire la propriété d'un résultat non défini" en n'utilisant pas la fonction fléchée), mais je sais que la méthode n'est pas c alled du tout parce que la console ne se connecte pas "Bonjour tout le monde". Lorsque j'appelle la méthode renderText à l'intérieur de la méthode render(), les éléments de la liste sont rendus correctement, mais cela ne fonctionne pas avec la façon dont je structure les autres composants.

Existe-t-il un moyen d'itérer à travers le textArray comme je le veux?

Answer 1

1. Vous n'appelez pas réellement votre fonction. vous passez une nouvelle fonction.

changement

{() => this.renderText(key)} 

à:

{this.renderText(key)} 

2. Vous fixer la portée lexicale au mauvais endroit. Vous utilisez toujours function pour la carte.

changement:

.map(function(key, index) { 

à:

.map((key, index) => { 

Lorsque l'écriture React code, fonctions utilisation des flèches partout. Ce sera un cas très rare où besoin pour utiliser le mot-clé function.

Answer 2

Vous ne pouvez pas renvoyer une nouvelle instruction depuis une fonction asynchrone telle que map() qui se trouve déjà dans votre fonction principale. Vous devez passer un rappel dans la fonction parente.Essayez quelque chose comme ceci:

function foo(callback){ 
    const bigObject = [{ 
     textArray: [*array of length 4 to 8*], 
     imgSrc: "string goes here" 
    }, { 
     textArray: [*array of length 4 to 8*], 
     imgSrc: "string goes here" 
    }]; 
    if(bigObject.length>0){ 
     bigObject.map((obj)=>{ 
     callback(obj); 
     }); 
    } 
} 

Maintenant, vous pouvez appeler toute la valeur de bigObject l'intérieur de votre méthode render comme ceci:

render(){ 
    return (
    <div> 
     {this.foo(e){ console.log(e.textArray); }} 
    </div> 
) 
}