it-swarm.com.de

Rendern eines array.map () in React

Ich habe ein Problem, bei dem ich versuche, ein Array von Daten zum Rendern eines <ul>-Elements zu verwenden. Im folgenden Code funktionieren die console.logs 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 zögern Sie nicht, auf alles hinzuweisen, was nicht die beste Praxis ist. Vielen Dank.

14
Andrey von Emme

Gosha Arinich ist richtig, Sie sollten Ihr <li>-Element zurückgeben . In diesem Fall sollten Sie jedoch in der Browserkonsole eine böse rote Warnung erhalten 

Jedes Kind in einem Array oder Iterator sollte eine eindeutige "Schlüssel" -Stütze haben.

sie müssen Ihrer Liste also "Schlüssel" hinzufügen:

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

oder lassen Sie die console.log() fallen und machen Sie einen schönen Oneliner mit den es6 pfeilfunktionen :

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

WICHTIGE AKTUALISIERUNG

Die Antwort oben ist die Lösung des aktuellen Problems, aber wie in den Kommentaren Sergey erwähnt: Wenn Sie den Schlüssel verwenden, der auf dem Kartenindex basiert, lautet BAD , wenn Sie etwas filtern möchten Sortierung. Verwenden Sie in diesem Fall item.id, wenn id bereits vorhanden ist, oder generieren Sie einfach eindeutige IDs.

38
Dmitry Birin

Du kommst nicht zurück. Ändern

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

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

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>
})
2
Daniel A. White
let durationBody = duration.map((item, i) => {
      return (
        <option key={i} value={item}>
          {item}
        </option>
      );
    });
0
Najma Muhammed

Bei der Implementierung dieser Lösung ist ein Problem aufgetreten.

Wenn Sie eine benutzerdefinierte Komponente haben, durch die Sie iterieren möchten, und den Status freigeben möchten, ist diese nicht verfügbar, da der Bereich .map () den Bereich general state () 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()}}
    }
}

Im Konstruktor bind ohne dies. Jede Verwendung einer Funktion/Methode innerhalb der Root-Komponente sollte mit this.that

0
Radu Galan