Rendern einer array.map() in React

Question 1

Ich habe ein Problem, bei dem ich versuche, ein Array von Daten zum Rendern von a zu verwenden <ul> Element. Im Code unter dem console.logfunktionieren einwandfrei, aber die Listenelemente werden nicht angezeigt.

var Main = React.createClass({
  getInitialState: function(){
    return {
      data: dataRecent
    }
  },

  render: function(){
    return (
      <div>
        <ul>
          {
           this.state.data.map(function(item, i){
             console.log('test');
             <li>Test</li>
           })
         }
        </ul>
      </div>
    )
  }
});

ReactDOM.render(<Main />, document.getElementById('app'));

Was mache ich falsch? Bitte fühlen Sie sich frei, auf alles hinzuweisen, was nicht Best Practice ist.

Question 2

Gosha Arinich hat Recht, du solltest deine zurückgeben <li> Element. In diesem Fall sollten Sie jedoch eine böse rote Warnung in der Browserkonsole erhalten

Jedes Kind in einem Array oder Iterator sollte eine eindeutige “Schlüssel”-Prop haben.

Sie müssen also “Schlüssel” zu Ihrer Liste hinzufügen:

this.state.data.map(function(item, i){
  console.log('test');
  return <li key={i}>Test</li>
})

oder lass die fallen console.log() und machen Sie einen schönen Einzeiler mit es6 Pfeilfunktionen:

this.state.data.map((item,i) => <li key={i}>Test</li>)

WICHTIGE AKTUALISIERUNG:

Die obige Antwort löst das aktuelle Problem, aber wie Sergey in den Kommentaren erwähnte: Die Verwendung des Schlüssels hängt vom Kartenindex ab SCHLECHT wenn Sie etwas filtern und sortieren möchten. Verwenden Sie in diesem Fall die item.id wenn id bereits vorhanden, oder generieren Sie einfach eindeutige IDs dafür.

Question 3

Sie kehren nicht zurück. Ändern

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>;
})

Question 4

let durationBody = duration.map((item, i) => {
      return (
        <option key={i} value={item}>
          {item}
        </option>
      );
    });

Question 5

Sie kehren implizit zurück undefined. Sie müssen das Element zurückgeben.

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>
})

Question 6

Fügen Sie Dmitrys Antwort hinzu, wenn Sie eindeutige Schlüssel-IDs nicht manuell handhaben möchten, können Sie verwenden React.Children.toArray wie in der vorgeschlagen Dokumentation reagieren

Kinder.aufArray.reagieren

Gibt die untergeordnete undurchsichtige Datenstruktur als flaches Array mit Schlüsseln zurück, die jedem untergeordneten Element zugewiesen sind. Nützlich, wenn Sie Sammlungen von untergeordneten Elementen in Ihren Rendermethoden manipulieren möchten, insbesondere wenn Sie this.props.children neu anordnen oder in Scheiben schneiden möchten, bevor Sie es weitergeben.

Notiz:

React.Children.toArray() ändert Schlüssel, um die Semantik verschachtelter Arrays beizubehalten, wenn Listen von untergeordneten Elementen reduziert werden. Das heißt, toArray stellt jedem Schlüssel im zurückgegebenen Array ein Präfix voran, sodass der Schlüssel jedes Elements auf das Eingabearray beschränkt ist, das es enthält.

 <div>
    <ul>
      {
        React.Children.toArray(
          this.state.data.map((item, i) => <li>Test</li>)
        )
      }
    </ul>
  </div>

Question 7

Verwendung einer zustandslosen Funktionskomponente Wir werden this.state nicht verwenden. So was

 {data1.map((item,key)=>
               { return
                <tr key={key}>
                <td>{item.heading}</td>
                <td>{item.date}</td>
                <td>{item.status}</td>
              </tr>
                
                })}

Question 8

Ich bin auf ein Problem bei der Implementierung dieser Lösung gestoßen.

Wenn Sie eine benutzerdefinierte Komponente haben, die Sie durchlaufen möchten, und Sie den Zustand freigeben möchten, ist sie nicht verfügbar, da der .map()-Bereich den allgemeinen state()-Bereich nicht erkennt. Ich bin zu dieser Lösung gekommen:

`

class RootComponent extends Component() {
    constructor(props) {
        ....
        this.customFunction.bind(this);
        this.state = {thisWorks: false}
        this.that = this;
    }
    componentDidMount() {
        ....
    }
    render() {
       let array = this.thatstate.map(() => { 
           <CustomComponent that={this.that} customFunction={this.customFunction}/>
       });

    }
    customFunction() {
        this.that.setState({thisWorks: true})
    }
}



class CustomComponent extend Component {

    render() {
        return <Button onClick={() => {this.props.customFunction()}}
    }
}

In Konstruktorbindung ohne this.that Jede Verwendung einer Funktion/Methode innerhalb der Root-Komponente sollte mit verwendet werden this.that