Как отправить новое сообщение в динамически загружаемую кнопку?

Question

Я пытаюсь отправить сообщение всякий раз, когда меняю комнату - которая загружается динамически, у меня есть компонент, который выглядит следующим образом:

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 page: https://github.com/Ido-Levi/Playground

Answer 1

Вы неправильно используете mapDispatchToProps функцию https://react -redux.js.org / using-реагировать-редукса / connect-mapdispatch

Вы должны вернуть объект, который будетиметь ключ, который является опорой для компонента

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

, а затем использовать onClick={() => props.changeRoomDispatch(roomBtn.roomName)}

В качестве альтернативы

вы можете использовать подключение безВторой аргумент для mapDispatchToProps как

export default connect(mapStateToProps)(Rooms); 

и имеет доступ к dispatch пропуском внутри функции, а затем onClick={() => props.dispatch(changeRoom(roomBtn.roomName))} должен работать нормально.

см. ссылку выше для документации