Verwenden Sie ReactJS zu .map durch Antwort von Express API

Question

Ich habe eine Express-API, die mit Daten von MongoDB antwortet, wenn dies beim Mounten einer reactJS-Komponente angefordert wird.

app.get('/api/characters', function(req, res) { 
    var db = req.db; 
    var collection = db.get('usercollection'); 
    collection.find({},{},function(e,docs){ 
    res.send({ 
     data: docs 
    }); 
    }); 
}); 

-Code für Charaktere Komponente:

export default class Characters extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = CharactersStore.getState(); 
    this.onChange = this.onChange.bind(this); 
    } 
    componentDidMount() { 
     CharactersStore.listen(this.onChange); 
     CharactersActions.getCharacters('http://localhost:3000/api/characters'); 
    } 
    componentWillUnmount() { 
     CharactersStore.unlisten(this.onChange); 
    } 
    onChange(state) { 
    this.setState(state); 
    } 
    render() { 
     return (
      <section> 
      <div className="container"> 
       <div className="row"> 
       <h2 className="text-center">{this.props.route.header}</h2> 
       <hr className="star-light"/> 
       <CharacterList data={this.state.characters}/> 
       </div> 
      </div> 
      </section> 
     ) 
    } 
} 

-Code für Charaktere Komponente Aktion

class CharactersActions { 
    constructor() { 
    this.generateActions(
     'getCharactersSuccess', 
     'getCharactersFail' 
    ); 
    } 
    getCharacters(query) { 
    requestPromise(query) 
     .then((res) => { 
     this.actions.getCharactersSuccess(res) 
     }).catch((err) => { 
     console.log('error:', err); 
     this.actions.getCharactersFail(err) 
     }) 
    } 
} 

export default alt.createActions(CharactersActions); 

-Code für Charaktere Komponente Shop

Die Zeichen-Komponente oben fordert die API beim Mounten an und sendet die Antwortdaten an den Speicher, um in State gespeichert zu werden.

gebe ich dann die Charaktere Zustand in die untergeordnete Komponente CharacterList als Requisiten (benannt Daten)

Charaktere Liste Komponente

export default class CharacterList extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 

     return (
     <div className="col-lg-3 col-sm-6"> 

     {console.log(this.props.data)} 

     // THIS IS WHERE I AM TRYING TO .MAP THROUGH THE RESULTS 

    </div> 
     ) 
    } 
} 

Ich versuche, eine Schleife zu verwenden .map Durch die zurückgesandten Daten bin ich mir etwas unsicher, wie es weitergeht. Die Daten werden zurückgegeben wird, wie folgt:

{ 
    "data": [ 
    { 
     "_id": "58d5044b0898f816066227f1", 
     "character": "Luke Skywalker" 
    }, 
    { 
     "_id": "58d504c60898f816066227f2", 
     "character": "Obi Wan Kenobi" 
    }, 
    { 
     "_id": "58d504c60898f816066227f3", 
     "character": "Han Solo" 
    } 
    ] 
} 

Answer 1

Es ist simple.I weiß nicht, wo Sie verwirrt. versuchen, diese

<div className="col-lg-3 col-sm-6"> 

{ 
    Array.isArray(this.props.data)&& this.props.data.map((val,index)=>{ 
      return val 
     }) 
} 
</div> 

Answer 2

Sie res.data als characters Speicher festlegen möchten.

getCharactersSuccess(res) { 
    this.characters = res.data; // <-- 
    this.isLoading = false; 
} 

Dann können Sie über die data Array abzubilden, und nicht die vollständige Antwort:

const data = [ 
 
    { 
 
    _id: '58d5044b0898f816066227f1', 
 
    character: 'Luke Skywalker' 
 
    }, 
 
    { 
 
    _id: '58d504c60898f816066227f2', 
 
    character: 'Obi Wan Kenobi' 
 
    }, 
 
    { 
 
    _id: '58d504c60898f816066227f3', 
 
    character: 'Han Solo' 
 
    } 
 
]; 
 

 
const Character = ({ data }) => <div>{data.character}</div>; 
 

 
class CharacterList extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     {this.props.data.map((character, i) => (
 
      <Character key={i} data={character} /> 
 
     ))} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<CharacterList data={data} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>