时间戳

首页 > 解决方案 > 在将状态映射到道具后访问组件“this”的道具时未定义

javascript - 在将状态映射到道具后访问组件“this”的道具时未定义

问题描述

在使用 react-redux 并将状态映射到带有 connect() 的道具时，接收到的状态具有正确的值，但是当通过 this.props 访问变量时，“this”始终未定义。

当按下侧边栏组件上的按钮（仅用于测试目的）时，第二个控制台日志总是失败并显示 TypeError：无法读取 console.log 上未定义的属性“props”（this.props.visibility）。

我是否缺少允许通过 this.props 访问 mapStateToProps 中新映射的值所需的额外内容？或者即使我应该以 this.props 以外的其他方式访问它们。

提前致谢。

组件

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {toggleSidebarVisibility } from '../../actions/layoutActions';


class Sidebar extends Component{

    render(){
      return(
        <div>
          <button class='btn btn-secondary' onClick={test}>B</button>
        </div>      
      );        
    }
}

function test(){
  console.log("hello");
  console.log(this.props.visibility)

}

const mapStateToProps = (state) => {
  console.log(state);
  console.log(state.layout.sidebarVisibility);
  return {
    visibility: state.layout.sidebarVisibility,
  }
};

应用程序.js

import React, { Component } from 'react';
import logo from './logo.svg';
import { Provider } from 'react-redux';
import Sidebar from './components/layout/Sidebar';
import Header from './components/layout/Header';
import store from './store';

class App extends Component {
  render() {
    return (
      <Provider store ={store}>
        <div className="App">
          <Header />
          <Sidebar/>
        </div>
      </Provider>
    );
  }
}

export default App;

Store.js

import { createStore, applyMiddleware,compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {

};

const middleWare = [thunk];

const store = createStore(rootReducer,initialState,compose(
    applyMiddleware(...middleWare),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    ));

export default store;

RootReducer

import {combineReducers } from 'redux';
import layoutReducer from './layoutReducer';

export default combineReducers({
    layout : layoutReducer
});

布局减速器

import {TOGGLE_SIDEBAR_VIS} from '../actions/types';

const initialState  = {
    sidebarVisibility : true
}

export default function(state = initialState,action){
    switch(action.type){
        case TOGGLE_SIDEBAR_VIS:
            return{ ...state,sidebarVisibility:action.payload};   
        default:
            return state;
    }
}

标签： javascriptreactjsreduxreact-redux

解决方案

当您在类/有状态组件中编写函数时，它们不需要函数名称之前的函数关键字。所以测试函数可以写成 test(){ 或者箭头函数 test = () => {

在您的情况下， this 在函数内部未定义的原因是函数需要绑定才能访问 this 和 state 或 props。您需要手动绑定构造函数中的函数或将其更改为箭头函数，如下所示

方法一：

在构造函数中手动绑定函数

      constructor(props){
           super(props);
           this.test = this.test.bind(this);
       }

       test = () => {
          console.log("hello");
          console.log(this.props.visibility);
      }

或者

方法2：

您可以将测试函数更改为箭头函数，因此不需要在构造函数中手动绑定，因为箭头函数会自动绑定，因此可以在箭头函数中使用

改变

function test(){
  console.log("hello");
  console.log(this.props.visibility);
}

到

test = () => {
  console.log("hello");
  console.log(this.props.visibility);
}

推荐阅读