Question

我试图显示从我的api中提取的所有对象，但内容根本没有呈现。
当我尝试tcp://127.0.0.1:514时，我得到了正确的答案，但没有显示。
console.log(contact)：

console.log(contact)

我的组件：

(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

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

Answer 1

问题出在您的reducer / API响应格式中 - 您在商店中最终会遇到的问题是：

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

检查API响应中的数据格式，并确保在存储之前对其进行修改，使其成为一个扁平数组，这是您的组件所期望的。

如果您不这样做，我强烈建议您使用React dev-tools和redux dev-tools，因为您可以轻松地查看组件的当前道具和商店的状态。

Answer 2

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

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

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

如何在React中正确显示内容

2 个答案: