React-Redux: метод Get при нажатии кнопки

Question

У меня есть список, в котором каждый элемент имеет идентификатор. Когда я нажимаю кнопку, связанную с этим идентификатором, я перенаправляю на страницу, на которой я получаю, используя этот идентификатор.

Поэтому, когда я нажимаю на кнопку, я перенаправляю на другую страницу с идентификатором в реквизите.

Информация. js

    class Information extends Component {


    render()
    let idmeeting = this.props.location.state
    console.log(idmeeting);
    console.log(this.props.meetingDetail)

    // I have tried something like this but it doesn't work (maybe I don't have wrote in the right way
    function mapStateToProps(state, ownProps) {
  return { 
    idmeeting: ownProps.location.state,
    meetingDetail: state,
  };
}


    function mapDispatchToProps(dispatch) {
      return {
        meetingInformation: (idmeeting) => dispatch(meetingInformation(idmeeting)),
      };
    }

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

И в В конце этого действия:

export const Information = (idmeeting) => {
  return (dispatch) => {
    fetch(
      api.meeting + '/' + idmeeting,
      {
        headers: {
          Accept: "application/json",
        },
      }
    )
    .then(
      (response) => response.json(),
      (error) => console.log("An error occurred.", error)
    )
    .then((meetingDetail) => {
      dispatch({
        type: "INFORMATION",
        meetingDetail: meetingDetail
      });
    });
  }
}

Как я могу сделать, чтобы сделать вызов при нажатии кнопки (в списке. js) для отображения в информации. js ??

Спасибо.

РЕДАКТИРОВАТЬ:

Информация. js

    class Information extends Component {
    componentDidMount(){
    this.props.meetingInformation(this.props.location.state)
    //I console log the fetch and it receives the id
    }

    render()
    console.log(this.props.meetingDetail)
    //this one prints the previous list of meetings plus one undefined

    function mapStateToProps(state) {
  return { 
    meetingDetail: state,
  };
}


    function mapDispatchToProps(dispatch) {
      return {
        meetingInformation: (meetingDetail) => dispatch(meetingInformation(meetingDetail)),
      };
    }

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

this.props.meetingDetail до вызова API:

(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

this.props.meetingDetail после вызова API:

((10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, Array(1)]

Редукторы. js

export const reducer = (state = [] , action) => {
    switch(action.type){
        case 'INFORMATION':
            return [...state, action.meetingDetail]
        default: 
            return state;
    }

}

export default reducer;

Answer 1

Вам необходимо использовать методы жизненного цикла, такие как componentDidMount, для запуска информационного действия, содержащего запрос get

Answer 2

Если вам просто нужно сделать запрос при монтировании страницы Information, просто используйте componentDidMount для отправки вашего действия.

class Information extends Component {
  componentDidMount() {
    this.props.meetingInformation(this.props.location.state);
  }
  render()
  //....



}

Если вы не можете получить доступ к реквизиту, переданному вашему route или this.props.location.state не определено, это, скорее всего, связано с тем, как вы определили свой маршрут через. Реагировать-маршрутизатор. В любом случае вы можете объединить маршрут props непосредственно с компонентами props, используя withRouter HO C. Вам нужно будет импортировать указанный HO C

import { withRouter } from "react-router";

, а затем обновить экспорт компонента до

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Information));

Answer 3

Я думаю, что проблема в вашем коде здесь:

function mapStateToProps(state, ownProps) {
  return { 
    idmeeting: ownProps.this.props.location.state,
    meeting: state,
  };
}

ownProps содержит реквизиты компонента, и вам больше не нужно this.props . поэтому, пожалуйста, попробуйте это вместо:

function mapStateToProps(state, ownProps) {
  return { 
    idmeeting: ownProps.location.state,
    meeting: state,
  };
}