收到此错误：类型错误：无法读取未定义的属性(读取"映射")

Question

我正在使用Redux构建一个react项目。我遇到了一个奇怪的错误，我无法解决。

我在浏览器窗口中看到的错误：

Contacts.render
C:/Users/lenovo/Desktop/contactmanager_redux/src/components/contacts/Contacts.js:18

15 | const { contacts } = this.props;
16 | return (
17 |   <React.Fragment>
> 18 |     <h1 className="display-4 mb-2">
| ^  19 |       <span className="text-success">Contact</span> List
20 |     </h1>
21 |     {contacts.map(contact => (
View compiled
▶ 22 stack frames were collapsed.
Function.mapToProps
C:/Users/lenovo/Desktop/contactmanager_redux/src/actions/contactActions.js:7

4 | 
5 | export const getContacts = () => async dispatch => {
6 |   const res = await axios.get("https://jsonplaceholder.typicode.com/users");
>  7 |   dispatch({
8 |     type: GET_CONTACTS,
9 |     paylaod: res.data
10 |   });
View compiled

当我尝试使用axios获取数据并尝试在reducer文件中添加有效负载时，出现了这个错误。我创建了单独的操作文件，然后使用dispatch函数将代码带到reducer中。

这是我的Contacts.js文件：

import React, { Component } from 'react';
import Contact from './Contact';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
// import {GET_CONTACTS} from '../../actions/types';
import {getContacts} from '../../actions/contactActions';
class Contacts extends Component {
componentDidMount(){
this.props.getContacts;
}

render() {
const { contacts } = this.props;
return (
<React.Fragment>
<h1 className="display-4 mb-2">
<span className="text-success">Contact</span> List
</h1>
{contacts.map(contact => (
<Contact key={contact.id} contact={contact} />
))}
</React.Fragment>
);
}
}
Contacts.propTypes = {
contacts: PropTypes.array.isRequired,
getContacts: PropTypes.func.isRequired
}
const mapStateToProps = (state) => ({
contacts: state.contact.contacts
});
/*const mapDispatchToProps = (dispatch) => (
{
getContacts: () => (dispatch({type: GET_CONTACTS}))
}
)*/
export default connect(mapStateToProps, getContacts)(Contacts);

my ContactActions.js代码：

import {GET_CONTACTS, DELETE_CONTACT, ADD_CONTACT} from './types';
import axios from 'axios';

export const getContacts = () => async dispatch => {
const res = await axios.get("https://jsonplaceholder.typicode.com/users");
dispatch({
type: GET_CONTACTS,
paylaod: res.data
});
}
export const deleteContact = (id) => {
return {
type: DELETE_CONTACT,
payload: id
}
}
export const addContact = (contact) => {
return {
type: ADD_CONTACT,
payload: contact
}
}

ContactReducer.js代码：

import {GET_CONTACTS, DELETE_CONTACT, ADD_CONTACT} from '../actions/types';
const initialState = {
contacts: []
};
export default function(state = initialState, action){
switch(action.type){
case GET_CONTACTS:
return {
...state,
contacts: action.payload
};
case DELETE_CONTACT:
return {
...state,
contacts: state.contacts.filter(contact => contact.id !== action.payload)
}
case ADD_CONTACT:
return {
...state,
contacts: [action.payload, ...state.contacts]
}
default:
return state;
}
}

Answer 1

初始联系人将没有数据。像这样进行条件渲染，这样只有当联系人中有数据可用时才会进行渲染。

{contacts && contacts.map(contact => (
<Contact key={contact.id} contact={contact} />
))}

Answer 2

您的Contacts组件中有几个问题：

1-由于您已经评论了mapDispatchToProps，实际上您还没有将getContacts函数作为道具发送到Contacts组件。

2-您尚未在componentDidMount中调用getContacts。您只需要wirtenthis.props.getContacts;，而getContacts必须是一个函数，您必须调用它才能获取数据。

我编辑了你的MyContact.js文件一点，请试试这个：

MyContact.js

import React, { Component } from 'react';
import Contact from './Contact';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
// import {GET_CONTACTS} from '../../actions/types';
import {getContacts as fetchContacts} from '../../actions/contactActions';
class Contacts extends Component {
componentDidMount(){
this.props.getContacts();
}
render() {
const { contacts = [] } = this.props;
return (
<React.Fragment>
<h1 className="display-4 mb-2">
<span className="text-success">Contact</span> List
</h1>
{contacts.map(contact => (
<Contact key={contact.id} contact={contact} />
))}
</React.Fragment>
);
}
}
Contacts.propTypes = {
contacts: PropTypes.array.isRequired,
getContacts: PropTypes.func.isRequired
}
const mapStateToProps = (state) => ({
contacts: state.contact.contacts
});
const mapDispatchToProps = (dispatch) => (
{
getContacts: () => (dispatch(fetchContacts())
}
)
export default connect(mapStateToProps, mapDispatchToProps)(Contacts);

Answer 3

试试这个。

{contacts?.map(contact => (
<Contact key={contact.id} contact={contact} />
))}