将 Redux 操作传递给嵌套的子组件

Question

我有以下结构

UserPage -> Container
|-----UserList -> Dumb Component
|--- User ->Dumb Component

我的 action 和 dispatch 显然连接到 UserPage 容器

function mapStateToProps(state) {
    return {
        users: state.users
    };
}


function matchDispatchToProps(dispatch) {
    return bindActionCreators({deleteUser: deleteUser}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(UserPage);

现在我将 deleteUser 操作传递给 UserList 组件然后从 UserList 到 User as

class UserList extends React.Component {
    userList() {
        return this.props.users.map(function(user, i){
            return(
                <User key={i} user={user} deleteUser={this.props.deleteUser} />
                );
        });
    }
}

最后我的叶子组件 User 有这个代码

class User extends React.Component {

            render() {
                console.info(this.props.deleteUser);
                var user = this.props.user
                return(
                    <tr>
                    <td>{user.id}</td>
                    <td>{user.name}</td>
                    <td>{user.email}</td>
                    <td>{user.createdAt}</td>
                    <td>{user.updatedAt}</td>
                    <td>
                    <a href="#" onClick={()=>this.props.deleteUser(user)}> Delete</a>
                    </td>
                    </tr>
                    );
            }
        }

        export default User;

现在，当我将删除用户从 UserList 传递给 User 时，出现此错误

app.bundle.js:29210 Uncaught TypeError: Cannot read property 'props' of undefined

顺便说一句，我尝试通过将 deleteUser 传递为 ()=>delete user 来将其视为函数，但我仍然收到该错误

Answer 1

您的 UserList#userList 方法没有您期望的 this。使用箭头函数在定义函数的地方保留 this：

userList() {
  return this.props.users.map((user, i) => (
    <User key={i} user={user} deleteUser={this.props.deleteUser} />
  )
}

见this on MDN

Answer 2

userList() {
    return this.props.users.map(function(user, i){
        return(
            <User key={i} user={user} deleteUser={this.props.deleteUser} />
        );
    });
}

should be

userList() {
    return this.props.users.map((user, i) => {
        return(
            <User key={i} user={user} deleteUser={this.props.deleteUser} />
        );
    });
}

因为function(user, i){}有自己的这个。但是使用 (user, i) => {} previous 这个被保留了下来。在此处了解有关箭头函数的更多信息 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

将 Redux 操作传递给嵌套的子组件

Passing Redux action to nested child components

javascript

reactjs

redux

react-redux