收到此错误：TypeError: Cannot read properties of undefined (reading 'map')

Question

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

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

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

我的 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。你刚刚写了this.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} />
    ))}