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

我有以下结构

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

很明显，我的操作和调度连接到了容器UserPage

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


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

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

现在，我将deleteUser操作作为 然后从UserList发送给用户作为

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

类用户列表扩展了React.Component{
用户列表（）{
返回this.props.users.map（函数（user，i）{
返回(
);
});
}
}

最后，我的叶组件用户有以下代码

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;

类用户扩展React.Component{
render（）{
console.info（this.props.deleteUser）；
var user=this.props.user
返回(
{user.id}
{user.name}
{user.email}
{user.createdAt}
{user.updatedAt}
);
}
}
导出默认用户；

现在，当我将delete user从UserList传递给user时，我得到了这个错误

app.bundle.js:29210未捕获类型错误：无法读取未定义的属性“props”

顺便说一句，我尝试将deleteUser作为函数来处理，将其传递为（）=>delete user，但我仍然得到了错误

您的

UserList#UserList

方法没有您期望的

this

。使用箭头函数在定义函数的位置保留

此

：

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

userList（）{
返回此.props.users.map（（用户，i）=>(
)
}

请参见您的

用户列表#用户列表

方法没有您期望的

此

。使用箭头函数在定义函数的位置保留

此

：

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

userList（）{
返回此.props.users.map（（用户，i）=>(
)
}

请参见

userList（）{
返回this.props.users.map（函数（user，i）{
返回(
);
});
}

应该是

userList（）{
返回此.props.users.map（（用户，i）=>{
返回(
);
});
}

因为

函数（user，i）{}

有它自己的属性。但是使用

（user，i）=>{}

之前的属性会被保留。在这里了解有关箭头函数的更多信息{ 返回this.props.users.map（函数（user，i）{ 返回( ); }); } 应该是

userList（）{
返回此.props.users.map（（用户，i）=>{
返回(
);
});
}

---

因为

function（user，i）{}

有自己的功能。但是使用

（user，i）=>{}

之前的功能将保留此功能。在此处了解有关箭头函数的更多信息

您的答案更明确并且有效谢谢：-）您的答案更明确并且有效谢谢：-）

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