javascript - 在我的沙箱中渲染数据的redux方法不成功

我正在尝试以redux方式显示数据。
当您单击高级体育搜索按钮时，将打开一个抽屉，其中当您单击搜索属性时，该抽屉应呈现历史数据
所以我在动作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)
);

最佳答案

这里有几个问题。如果不为您修复它们，这就是我所困扰的...


状态和道具是两个不同的东西。您可以将Redux用于mapStateToProps，以便在组件中轻松使用。成功更新Redux状态后，您可能需要这样做。
Redux状态和组件级状态也是两个不同的事物。在构造函数中定义的this.state是该组件的状态。您不能只添加另一个state对象并期望setState对其进行更新。您的状态对象未绑定到该类。
要更新Redux状态，从响应中将您的想法变为dispatch(fetchSportsHistoryData(response.data)是正确的。现在，您需要执行该操作以将数据返回到状态。您需要确保您有一个减速器在监听FETCH_HISTORY_Sports，它通过更新Redux状态来响应。
现在，如果您在一起，则可以在组件中使用mapStateToProps，然后可以使用this.props.historySports访问它。