通过Express API的响应使用ReactJS到.map通过响应的快速API

Question

我有一个Express API，在安装reactJS组件时请求来自MongoDB的数据。

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 
    }); 
    }); 
}); 

代码字符组成：

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> 
     ) 
    } 
} 

代码字符组成行动

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); 

代码字符组成商店

class CharactersStore { 
    constructor() { 
    this.bindActions(CharactersActions); 
    this.characters = ['']; 
    this.isLoading = true; 
    } 
    getCharactersSuccess(res) { 
    this.characters = res; 
    this.isLoading = false; 
    } 
    getCharactersFail(err) { 
    toastr.error(err.responseJSON && err.responseJSON.message || err.responseText || err.statusText); 
    } 
} 

export default alt.createStore(CharactersStore); 

上面的字符组件在安装时请求API并将响应数据一起发送到存储以保存到状态。

我再通过人物状态进入子组件CharacterList道具（名为数据）

人物名单组件

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> 
     ) 
    } 
} 

我试图使用.MAP循环通过返回的数据，但有点不确定如何进行，任何意见将不胜感激。被返回的数据如下：

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

Answer 1

这是simple.I不知道你在哪里困惑。试试这个

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

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

Answer 2

你要设置res.data为您characters店。

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

然后，你可以映射在data阵列，而不是完整的响应：

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>