如何在React中正确显示内容

问题描述：

我试图显示从我的api中获取的所有对象，但内容根本没有被渲染。
当我尝试console.log(contact)时，我得到正确的响应，但未显示。
console.log(contact)：如何在React中正确显示内容

(2) [{…}, {…}] 
0:{_id: "59c7b975d9d7eed098507a64", contactTitle: "Mrs", …} 
1:{_id: "59c86766b3434b06533f3374", contactTitle: "Mr", …} 
length:2

而且我的组件：

import _ from 'lodash'; 
import React, { Component } from 'react'; 
import { Link } from 'react-router'; 
import { connect } from 'react-redux'; 
import { fetchContacts } from '../../actions'; 

class ContactList extends Component { 
    componentDidMount() { 
      this.props.fetchContacts(); 
    } 
    renderContacts() { 
     return _.map(this.props.contacts, contact => { 
      console.log(contact); 
      return (
       <div className="collection" key={contact._id}> 
        <Link to="/" className="collection-item"> 
         {contact.contactName} 
        </Link> 
       </div> 
      ); 
     }); 
    } 

    render() { 
     return (
      <div> 
       <h3>Contacts</h3> 
       <div>{this.renderContacts()}</div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps({ contacts }) { 
    return { contacts }; 
} 

export default connect(mapStateToProps, { fetchContacts })(ContactList);

我也有一个contact.reducer.js：

export default function(state = [], action) { 
    switch (action.type) { 
    case FETCH_CONTACTS: 
     return action.payload; 
    default: 
     return state; 
    } 
}

而且actions.js：

export const fetchContacts =() => async dispatch => { 
    const res = await axios.get('/api/contacts'); 

    dispatch({type: FETCH_CONTACTS, payload: res.data }) 
}

我不明白为什么它没有被显示，我在类似的项目中做了同样的事情，并且它在工作。

在'map'函数里面你console.log结果。你回来了什么？单个联系人还是数组？ – mersocarlin

@HemersonCarlin我收到了所有联系人的数组，我在上面的问题中复制了回复（第一个代码片段） –

因此，这是您的错误。如果我理解它，你正在映射一个数组，每个项目也恰好是一个数组。对？ – mersocarlin

答

正如评论（由我和@Andy_D）所述，您的api响应似乎是发送的数据与您预期的不同。或者你可以在后端改变它，或者：

export const fetchContacts =() => async dispatch => { 
    const res = await axios.get('/api/contacts'); 

    dispatch({type: FETCH_CONTACTS, payload: res.data.contacts }) 
}

答

看起来问题出在你的减速/ API响应的格式 - 你在你的店结束了什么是这样的：

{ 
    contacts: [ 
    [{}, {}] 
    ] 
}

检查的数据的格式API响应，并确保在存储它之前对其进行修改，使其成为平面阵列，这是您的组件所期待的。

如果您不是，我会强烈建议您在这里使用React开发工具和Redux开发工具，因为您可以轻松地查看组件的当前道具和商店状态。

如何在React中正确显示内容

相关推荐