Question

未捕获的类型错误：无法读取未定义的属性“props”（reactjs）（非常简单）

2018-08-31

810

javascript reactjs redux react-redux

我按照这个关于 redux 的初学者教程进行操作： text 、 vid 。

除了增量按钮外，一切正常。当我单击增量按钮时，出现此错误：

Uncaught TypeError: Cannot read property 'props' of undefined

查看发生了什么： gif

为什么我在执行“mapStateToProps”时出现该错误？

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Test_left from './eo_app.jsx';
import { Provider } from 'react-redux';
import { createStore } from "redux";

const initialState = {
    count: 21
};

const reducer = (state = initialState, action) => {
    console.log('reducer', action);

    switch (action.type) {
        case 'INCREMENT':
            return { count: 55 };
        default:
                return state;
    }
};

const store = createStore(reducer);


const App = () => (
  <Provider store={store}>
    <Test_left />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('target'));

//// store.dispatch({type: 'INCREMENT' }); this will work as expected

eo_app.jsx

import React from 'react';
import { connect } from 'react-redux';


class Test_left extends React.Component {
    constructor(props) {
        super(props);
    }

    increment () {
    this.props.dispatch({ type: 'INCREMENT' }); // <== ERROR IS RAISED HERE
  }

    render() {
        console.log('props:', this.props)
        return (
                <React.Fragment>
                    <h1> WE GOT RENDERED </h1>
                    <h1>{this.props.count}</h1>
                    <button onClick={this.increment}> Increment </button>
                </React.Fragment>
        )
    };
}

const mapStateToProps = state => ({
    count: state.count
})

export default connect(mapStateToProps)(Test_left);

Answer 1

编辑：

实际上有两个问题：

首先，您需要将 increment 函数绑定到类本身。这是一个常见的“陷阱”，您可以在此处阅读 - https://reactjsnews.com/es6-gotchas

第二个问题是，使用 react-redux 和 connect 函数，您需要将 redux dispatch 函数映射到 prop。这是通过您在 connect 调用中传递的第二个函数完成的： mapDispatchToProps 。

您的组件可能看起来像：

const mapDispatchToProps = dispatch => ({
    handleClick: () => dispatch({ type: 'INCREMENT' })
});

通过这两处更改，您的组件将看起来像

class Test_left extends React.Component {
    constructor(props) {
        super(props);

        // Bind `increment` to this class's scope
        this.increment = this.increment.bind(this);
    }

    increment () {
        // Use newly created prop function to dispatch our action to redux
        this.props.handleClick();
    }

    // ...
}

const mapStateToProps = state => ({
    count: state.count
});
const mapDispatchToProps = dispatch => ({
    handleClick: () => dispatch({ type: 'INCREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Test_left);

Answer 2

当您执行： this.props.dispatch 时，它将调用使用 connect 映射的调度。但是您没有调度的映射：

export default connect(mapStateToProps)(Test_left);

因此，将前面的代码替换为：

export default connect(mapStateToProps, mapDispatchToState)(Test_left);

现在，定义 mapDispatchToState 函数并在那里调用调度。

我忘记提到的关键问题是确保绑定 this ，因为当您在方法内部调用时 this 将未定义。或者，您可以分配一个公共类方法：

increment = () => { // now, this will be accessible

PS：请参阅这篇文章，了解为什么您需要使用 map 调度而不是直接调度它。不要将连接映射与直接调度混合使用是有意义的。