javascript - 如何在动态加载的按钮中调度新消息？

每当我更改房间时，我都试图发送消息-动态加载，
我有一个看起来像这样的组件：

const Rooms = (props) => {
    return(
        <div className='rooms-styles'>
        {rooms.length === 0 && <p>This server is missing rooms!! WERE GOING TO DIEEE!!</p>}
              <div>
                  {rooms.length > 0 && rooms.map((roomBtn)=><button onClick={()=>{/* Need to dispatch here! */}}>{roomBtn.roomName}</button>)}
             </div>
        </div>
    );
}

并且我正在尝试更改一个称为“房间”的状态属性（即所谓的状态？）。

到目前为止，我已经尝试过：


设置一个mapStateToProps和mapDispatchToProps像这样：


selectedRoom是所选房间，通过单击按钮设置为selectedRoom = roomBtn.roomName

const mapStateToProps = (state) => {
    return {
      room: selectedRoom
    };
  };
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({changeRoom}, dispatch);
  };

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

当props.dispatch(changeRoom(roomBtn.roomName))是一个动作时使用changeRoom（由于我无法访问props中的onClick，因此无法正常工作）


github页面：https://github.com/Ido-Levi/Playground

最佳答案

您错误地使用了mapDispatchToProps函数
https://react-redux.js.org/using-react-redux/connect-mapdispatch

您必须返回一个对象，该对象的键将是组件的属性

const mapDispatchToProps = (dispatch) => {
    return {changeRoomDispatch : bindActionCreators({changeRoom}, dispatch)};
  };

然后使用onClick={() => props.changeRoomDispatch(roomBtn.roomName)}

或者

您可以在没有第二个mapDispatchToProps参数的情况下使用connect作为

export default connect(mapStateToProps)(Rooms);

并可以访问该函数内的dispatch属性，然后onClick={() => props.dispatch(changeRoom(roomBtn.roomName))}应该可以正常工作。

请参阅上面的链接以获取文档