未显示正确数据的redux反应
未显示正确数据的redux反应
提问于 2022-06-12 19:12:03
我上过几门关于反应和还原的课程，到目前为止，挑战仍在堆积如山。我正在创建一个简单的应用程序，当时我只需要映射api的响应，但是状态看起来很奇怪。操作正在返回数据，但显示时很尴尬。请看附件中的图片。有人知道为什么数据的console.log返回一个数字而不是一个对象或数组名吗？另外，如果从redux工具中看到状态，则可以看到对象名称将显示的位置，而不是未定义的状态。请帮帮忙。我已经干了几天了，一直把头撞在墙上。在这里输入图像描述
reducer
import _ from 'lodash';
import {
FETCH_CLIENT,
FETCH_CLIENTS,
ADD_CLIENTS_COMMENTS
} from "../actions/types";
export default (state = {}, action) => {
switch (action.type) {
case FETCH_CLIENT:
return { ...state, ..._.mapKeys(action.payload, 'ClientUno') };
case FETCH_CLIENTS:
return { ...state, [action.payload.ClientUno]: action.payload };
case ADD_CLIENTS_COMMENTS:
return { ...state, [action.payload.ClientUno]: action.payload };
default:
return state;
}
};
combined reducer
import { combineReducers } from "redux";
import ClientsReducer from "./ClientsReducer";
export default combineReducers({
clients:ClientsReducer
});
action
const mapStateToProps = state => {
return{
clients:Object.values(state.clients),
}
}
export default connect(mapStateToProps,{fetchAllClients})(Clients);去除.ClientUno后。这是我的新状态
附:邮递员回应
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-12 22:16:02
看来你的还原器逻辑是错的：
return { ...state, [action.payload.ClientUno]: action.payload }根据屏幕截图，您的action.payload是一个项目数组。各个项目中确实有一个.ClientUno字段。但是数组绝对不会。因此，action.payload.ClientUno确实是undefined，而这正是您所使用的密钥。
你需要重新考虑一下你想用什么作为钥匙。我不知道你是如何构造这个切片状态的，所以我不能给出一个建议。
我将注意到，您在这里使用的Redux模式非常过时。使用Redux的“现代Redux”要简单得多，而且更容易使用--没有"ACTION_TYPES"、开关语句或对象扩展。请参阅我们的官方Redux文档教程，了解如何使用Redux工具包：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72595159
复制相关文章
相似问题
腾讯云开发者
