редукционный способ рендеринга данных не удаётся в моей песочнице

Question

• Я пытаюсь отобразить данные в избыточном виде.
• , когда вы нажимаете кнопку расширенного спортивного поиска, открывается ящик, в котором при нажатии на атрибуты поиска он должен отображать данные истории
• поэтому я создал этот метод в действиях fetchHistorySportsDatafromURL
• , а затем вызвал этот метод fetchHistorySportsDatafromURL на вкладках ящика.
• , но он не отображает данные.
• Я отладил и обнаружил неопределенное для этого const historySports = this.props.historySports;console.log ("historySports --->", historySports);
• Я использую mapDispatchToProps, но все еще не добился успеха.
• Я пытаюсь отобразить здесь свои данные, читая данные изapi {historySports}
• весь мой код рендеринга находится в этом файле sports-advanced-search.js
• с моим фрагментом кода и песочницей ниже

https://codesandbox.io/s/5x02vjjlqp

действия

export const fetchHistorySportsDatafromURL = data => {
  return dispatch => {
    if (data != undefined) {
      return axios({
        method: "get",
        url: "https://jsonplaceholder.typicode.com/comments",
        data: data,
        config: { headers: { "Content-Type": "application/json" } }
      })
        .then(function(response) {
          console.log("fetchSportsHistoryData--->", response);
          dispatch(fetchSportsHistoryData(response.data));
        })
        .catch(function(response) {
          dispatch(fetchSportsHistoryData([]));
        });
    }
  };
};

код визуализации

  getHistoryData = values => {
    this.props.fetchHistorySportsDatafromURL();
  };


   render() {
    const { classes } = this.props;
    const { value } = this.state;

    const Sports = this.props.Sports;
    const historySports = this.props.historySports;
    console.log("historySports--->", historySports);
    console.log("this.props--->", this.props);
    console.log("this.state--->", this.state);
   }
const mapDispatchToProps = dispatch => {
  return {
    fetchHistorySportsDatafromURL: () => {
      dispatch(fetchHistorySportsDatafromURL());
    }
  };
};

export default withStyles(styles)(
  connect(
    null,
    mapDispatchToProps
  )(ScrollableTabsButtonAuto)
);

Answer 1

Здесь есть несколько проблем.Не исправляя их для вас, вот что, я думаю, сбивает вас с толку ...

1. Состояние и реквизит - это две разные вещи.Вы можете использовать Redux для mapStateToProps для удобного использования в вашем компоненте.Возможно, вы захотите сделать это, как только вы успешно обновите состояние Redux.
2. Состояние Redux и состояние уровня компонента также две разные вещи.this.state, определенный в конструкторе, является состоянием этого компонента.Вы не можете просто добавить еще один state объект и ожидать setState его обновления.Ваш объект состояния не связан с классом.
3. Чтобы обновить состояние Redux, ваша идея на dispatch(fetchSportsHistoryData(response.data) из ответа находится на правильном пути.Теперь вам нужно для этого действия вернуть данные в состояние.Вы должны убедиться, что у вас есть прослушиватель для прослушивания FETCH_HISTORY_Sports, который отвечает обновлением состояния Redux.
4. Теперь, если у вас есть эта часть вместе, теперь вы можете использовать mapStateToProps в своем компоненте, а затем выможет получить к нему доступ this.props.historySports.