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);

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

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
                    }

它一直在正常运行时间行中崩溃，即使我正在检查它是否未定义

Cannot read property 'uptime_in_days' of undefined

我尝试将渲染条件更改为

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

但没有任何变化。

如何呈现该值？

编辑：我注意到这个错误

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

在我的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

我猜你的 UI 在填充状态之前在初始渲染上爆炸了。

解决方案

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

props.redisReducer.serverInfo.Server?.uptime_in_days

使用常规空值检查

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

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

React-Redux , issues reading an object fetched through redux thunk

reactjs

redux

redux-thunk

问题

解决方案