Ich habe eine Komponente wie unten gezeigt definiert. creativeList enthält Werte, die angezeigt werden sollen. Es enthält Folgendes:

creativeList = [{keyID: "AC072", cost: 1461, people: 520, cpp: "2.81"}, 
{keyID: "AC098", cost: 1600, people: 470, cpp: "3.4"}]

Ich möchte das keyID anzeigen können, indem ich es in meiner Komponente zurückgebe. Ich kann den Wert abrufen, indem ich mich an der Konsole anmelde. Ich kann ihn jedoch nicht zurückgeben. Kann mir jemand helfen?

function DisplayList(props) {
    const creativeList = props.creativeList

    function ret(){
        creativeList.forEach(function(item){
            const i = item[0]

            console.log(i.keyID)

            return (
                <li>{i.keyID}</li>
            );
        })
    }

    return (
        <div>
            <li>List:</li>
            {ret()}
        </div>
    );
}

export default DisplayList;
0
Ram Prash 8 Feb. 2020 im 09:33

4 Antworten

Beste Antwort

Fügen Sie kurz vor der forEach-Anweisung eine return-Anweisung hinzu und ersetzen Sie forEach durch map

Map gibt im Gegensatz zu forEach ein Array der Elemente zurück, die von seinem Rückrufparameter zurückgegeben werden.

ForEach gibt undefiniert zurück, deshalb wird Ihre Liste nicht gedruckt.

function ret(){
        return creativeList.map(function(item){

            console.log(item.keyID)

            return (
                <li>{item.keyID}</li>
            );
        })
    }
4
Sydney Y 8 Feb. 2020 im 06:56

Versuche dies. Sie haben es versäumt, eine Komponente zurückzugeben, und natürlich sollten Sie anstelle von foreach map verwenden

import React from "react";

function DisplayList(props) {
  const creativeList = props.creativeList;


  function ret() {
    return creativeList.map(function(item) {
      const i = item;

      console.log(i.keyID);

      return <li>{i.keyID}</li>;
    });
  }

  return (
    <div>
      <li>List:</li>
      {ret()}
    </div>
  );
}

export default DisplayList;
2
MAREESKANNNAN RAJENDRAN 8 Feb. 2020 im 06:43

Es gibt keine Möglichkeit, forEach zu stoppen. Wenn Sie zurückkehren möchten, gibt forEach undefiniert zurück. Verwenden Sie stattdessen map. Arbeitsbeispiel: Sandbox

1
ANaemi 8 Feb. 2020 im 06:48

Sie können mit map vereinfachen. Fügen Sie außerdem jedem Element in der Liste das Attribut key hinzu.

function DisplayList(props) {
  const { creativeList = [] } = props.creativeList;
  return (
    <div>
      <div>List:</div>
      {creativeList.map(({ keyID }) => (
        <li key={keyID}>{keyID}</li>
      ))}
    </div>
  );
}
export default DisplayList;
1
Siva Kondapi Venkata 8 Feb. 2020 im 09:49