React Redux Class Component TypeError: Cannot read properties of undefined (reading \'params\')答案

【问题标题】：React Redux Class Component TypeError: Cannot read properties of undefined (reading 'params')React Redux Class Component TypeError: Cannot read properties of undefined (reading \'params\')
【发布时间】：2022-08-13 14:00:13
【问题描述】：

我收到错误 TypeError: Cannot read properties of undefined (reading \'params\')

所以我尝试使用id 获取数据详细信息用户，当我尝试查看时，我得到了错误

应用程序.js

import React, { Component } from \'react\'
import Jumbotron from \'./component/Jumbotron\'
import NavbarComponent from \'./component/NavbarComponent\'

import {
  BrowserRouter,
  Route,
  Routes,
} from \"react-router-dom\";

import HomeContainer from \'./container/HomeContainer\';
import CreateUserContainer from \'./container/CreateUserContainer\';
import EditUserContainer from \'./container/EditUserContainer\';
import DetailUserContainer from \'./container/DetailUserContainer\';

export default class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <NavbarComponent />
          <Jumbotron />
          <Routes>
            <Route path=\'/\' element={<HomeContainer/>} exact />
            <Route path=\'/create\' element={<CreateUserContainer />} exact />
            <Route path=\'/edit/:id\' element={<EditUserContainer />} exact />
            <Route path=\'/detail/:id\' element={<DetailUserContainer />} exact />
          </Routes>
        </BrowserRouter>
      </div>
    )
  }
}

容器/DetailUserContainer.js

import React, { Component } from \'react\'
import { Container } from \'react-bootstrap\'
import { connect } from \'react-redux\';
import { getDetailUser } from \'../actions/UserAction\';

class DetailUserContainer extends Component {
  
  componentDidMount(){
    this.props.dispatch(getDetailUser(this.props.match.params.id));
  }
  
  render() {
    return (
      <div>
        <Container className=\'pt-3\'>
          <div>
            <h1>Detail</h1>
          </div>
        </Container>
      </div>
    )
  }
}

export default connect()(DetailUserContainer)

减速器/users.js

import { GET_LIST_USERS, GET_DETAIL_USERS } from \"../actions/UserAction\";

let initialState = {
    getUsers: false,
    errorGetUser: false,
    // DETAIL USER
    getDetailUsers: false,
    errorGetDetailUser: false
}

const users = (state = initialState, action) => {
    switch (action.type) {
        case GET_LIST_USERS:
            return {
                ...state,
                getUsers: action.payload.data,
                errorGetUser: action.payload.errorMessage
            };
        case GET_DETAIL_USERS:
            return {
                ...state,
                getDetailUsers: action.payload.data,
                errorGetDetailUser: action.payload.errorMessage
            };
        default:
            return state;
    }
}

export default users;

动作/UserAction.js

import React from \'react\'
import axios from \'axios\'

export const GET_LIST_USERS = \"GET_LIST_USERS\"
export const GET_DETAIL_USERS = \"GET_DETAIL_USERS\"

// GET USER
export const getListUser= () => {
  return (dispatch) => {
    axios.get(\'https://my-json-server.typicode.com/baihaqiyazid/database/users\')
      .then(function (response) {
        dispatch({
          type: GET_LIST_USERS,
          payload: {
            data: response.data,
            errorMessage: false
          }
        })
      })
      .catch(function (error) {
        dispatch({
          type: GET_LIST_USERS,
          payload: {
            data: false,
            errorMessage: error.message
          }
        })
      })
  }
}

// DETAIL USER
export const getDetailUser= (id) => {
  return (dispatch) => {
    axios.get(\'https://my-json-server.typicode.com/baihaqiyazid/database/users/\' + id)
      .then(function (response) {
        dispatch({
          type: GET_DETAIL_USERS,
          payload: {
            data: response.data,
            errorMessage: false
          }
        })
      })
      .catch(function (error) {
        dispatch({
          type: GET_DETAIL_USERS,
          payload: {
            data: false,
            errorMessage: error.message
          }
        })
      })
  }
}

减速器/index.js

import { combineReducers } from \'redux\'
import users from \'./users\'

export default combineReducers({
    users
})

如何解决？

没有与您的详细用户组件匹配的参数..
是的，我是初学者redux，如何解决？我已经编辑了帖子

标签： javascript reactjs

【解决方案1】：

在您的组件中安装使用了这个..

componentDidMount(){
   
    this.props.getDetailUser(id);
  }

还使用 mapstate 连接您的州..

function mapState(state) {
  return {
    match: state.users // which is the name you have assigned in the combine Reducer
  };
}

export default connect(mapState, {getDetailUser})(DashBoard);

参考.. Class component with Redux

https://react-redux.js.org/tutorials/connect

【讨论】：

我尝试这样添加函数mapState，并且还连接，但结果仍然相同
您能否提供您的 combineReducer 的详细信息？
是的，我已经编辑了帖子