redux渲染数据的方式在我的沙箱中不成功

Question

• 我正在尝试以redux方式显示数据
• 当您单击高级体育搜索按钮时，会打开一个抽屉，当您单击搜索属性时，它将呈现历史数据
• 所以我在从URL获取历史体育数据的操作中创建了这个方法
• 然后在抽屉的选项卡中调用这个fetchHistorySportsDatafromURL方法
• 但不显示数据
• 我调试并发现此consthistorySports=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的reducer，它通过更新Redux状态来响应
4. 现在，如果您将该部分组合在一起，那么现在可以在组件中使用mapStateToProps，然后可以使用this.props.historySports访问它