Comment la carte à l'intérieur d'une carte de fonction dans reactjs

J'ai mon tableau.Et j'ai posfields qu'au perfectionnement de l'affichage par
à l'aide de la carte de fonction.Mais mon problème est quand je suis en train de carte de td à l'intérieur de posfields carte en fonction de ses en me jetant à l'erreur ""en-têtes "undefined".

{
  this.POSFields.map(function (posFields, POSFieldsId) {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map(function (headers) {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  })
}
InformationsquelleAutor sowmyasree | 2017-08-28
  1. 11

    Comme @Andrew l'a déjà suggéré, vous devez utiliser arrowfonctions afin d'être en mesure d'accéder à this à l'intérieur de votre carte. - Vous actuellement lâche le contexte de this 

    {
  this.POSFields.map((posFields, POSFieldsId) => {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map((headers) => {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  })
}
    • juste j'ai essayé à l'aide de la flèche fucntion comme tu dit,Maintenant son lancement, la carte de undefined
    • Avez-vous évalué, que POSFields est un tableau? Comment avez-vous déclarer votre fonction? Avez-vous lier votre fonction?
    • Avez-vous déclarer votre fonction comme ceci: myFunction = () => {..}?
    • Mon erreur est de lancer sur les en-têtes,et posfields fonctionne bien
    • Comment headers ressembler? Avez-vous essayé de console.log(this.headers)?
    • hey merci les gars,Flèche fonction aidé pour moi,Thanq tellement de votre temps 🙂

    InformationsquelleAutor Nocebo
  2. 3

    Lier fonction map pour avoir accès à this contexte:

    {
  this.POSFields.map(function (posFields, POSFieldsId) {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map(function (headers) {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  }.bind(this))
}

    Ou la flèche fonctions this.POSFields.map((posFields, POSFieldsId) => {

    InformationsquelleAutor Andrew
  3. 0

    j'ai l'habitude d'utiliser une fonction à l'intérieur d'une fonction pour renvoyer la carte func

    {
  this.POSFields.map(function (posFields, POSFieldsId) {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.getData()}
          </select>
        </td>
      </tr>
    )
  })
}

getData(){
return this.headers.map(function (headers) {
              return (
                <option key={headers}>{headers}</option>
              );
            }}
    InformationsquelleAutor jadlmir
  4. 0

    C'est la même chose que @Nocebo répondu, mais avec un peu de correction sur les touches. Ils devraient être dans la balise plutôt dans celui ci-dessous. Si vous ouvrez vous navigateurs console, vous verrez un message d'avertissement à ce sujet:

    {
  this.POSFields.map((posFields, POSFieldsId) => {
    return (
      <tr key={POSFieldsId}>
        <td className="posheader" value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map((headers) => {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  })
}
    InformationsquelleAutor XxXtraCookie