React-Redux ，读取通过 redux thunk 获取的对象时出现问题

Question

我有一个如下所示的 redux 操作/reducer。 行动：

export function loadServerInfo() {
    return (dispatch) => axios.get(`${config.SERVER}/redis/server/info`).then(res => {
        if (res.status == 200) {
            dispatch(fetchServerInfo(res.data))
        }
    }).catch(err => {

    })
}

export function fetchServerInfo(payload) {
    return {
        type: GET_SERVER_INFO,
        payload
    }
}

减速机：

const defaultState = {
    decodedRedisKey: {},
    keyDecoded: false,
    serverInfo: {}
}

const redisReducer = (state = defaultState, action: Action) => {
    switch (action.type) {
        case GET_REDIS_KEY_INFO: {
            return {
                ...state,
                decodedRedisKey: action.payload
            }
        }
        case REDIS_KEY_DECODED: {
            return {
                ...state,
                keyDecoded: action.payload
            }
        }
        case GET_SERVER_INFO: {
            console.log(action.payload) //this is fired and logs the proper data, which is an object
            return {
                ...state,
                serverInfo: action.payload
            }
        }
        default:
            return {
                ...state
            };
    }
}

export default redisReducer;

然后我有一个组件连接并映射到 redux。这些是连接参数

const mapStateToProps = (state) => state;

function mapDispatchToProps(dispatch) {
    return {
        loadServerInfo: async () => {
            dispatch(loadServerInfo());
        }
    }
}

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

然后，我尝试调用 fetch 并获取数据。 问题是对象的格式如下：

serverInfo: {
  Server : {
  uptime_in_days: "100",
  version: "1.0.0"
 }
}

我的道具在 useEffect 上触发

  React.useEffect(() => {
        getUsersToken();
        props.loadServerInfo();

        console.log(process.env.REACT_APP_ENV)
    }, []);

如果我把它放在 useEffect 中，首先它会记录 undefined，然后它会加载

React.useEffect(() => {
    console.log("server info")
    console.log(props.redisReducer.serverInfo)
    console.log(props.redisReducer.serverInfo.Server)
    // console.log(props.redisReducer.serverInfo.Server.uptime_in_days) , if i uncomment this it crashes
}, [props.redisReducer.serverInfo])

所以我在渲染 uptime_in_days 值时遇到问题

我试过这样做

{props.redisReducer.serverInfo != undefined && !displayServerInfo != undefined ?
                        <div className="basic-server-info-data">
                            <p><img src={redisLogo} /></p>
                            {/* <p>Connected Clients: <i>{serverInfo.Clients.connected_clients} </i></p> */}
                            {/* <p>Memory usage:  <Progress type="circle" percent={memoryUsageStats} width={50} /> </p> */}
                            <p>Tokens (displayed): <i>{usersToken.length}</i></p>
                            <p>Uptime: <i>{props.redisReducer.serverInfo.Server.uptime_in_days} days</i></p> 
                        </div>
                        :
                        null
                    }

它总是在 Uptime 线上崩溃，即使我正在检查它是否未定义

无法读取未定义的属性“uptime_in_days”

我尝试将渲染条件更改为

props.redisReducer.serverInfo != undefined && !displayServerInfo != undefined &&  props.redisReducer.serverInfo.Server.uptime_in_days != undefined

但没有任何改变。

如何呈现该值？

编辑：我注意到了这个错误

警告：无法对未安装的组件执行 React 状态更新。 这是一个空操作，但它表明您的应用程序中存在内存泄漏。 要修复，请取消 useEffect 中的所有订阅和异步任务 清理功能。

在我的使用效果中

Answer 1

问题

问题是您的所有空检查都以始终定义的状态props.redisReducer.serverInfo 开始

const defaultState = {
  decodedRedisKey: {},
  keyDecoded: false,
  serverInfo: {} // <-- defined!
}

state.serverInfo 始终是一个已定义的对象，因此console.log(props.redisReducer.serverInfo) 和console.log(props.redisReducer.serverInfo.Server) 将始终记录，条件props.redisReducer.serverInfo != undefined 将始终为真。

在访问正常运行时间值之前，您忽略了对 props.redisReducer.serverInfo.Server 的空值检查

props.redisReducer.serverInfo.Server.uptime_in_days

我猜你的用户界面在填充状态之前的初始渲染中爆炸了。

解决方案

使用可选链接来处理对 Server 的空值检查，可能仍然未定义。

props.redisReducer.serverInfo.Server?.uptime_in_days

使用传统的空检查

props.redisReducer.serverInfo.Server && 
props.redisReducer.serverInfo.Server.uptime_in_days