Redux，渲染信息的时机

Question

我正在尝试在组件中使用我的 redux 存储中的信息，我需要更好地了解接收信息的时间。 我有以下带有 mapStateToProps 调用的导航组件，我想将个人资料图片链接加载到标题中......例如 Facebook 或许多有用户登录的网站。

class Navigation extends Component {

// IF WE HAVE A USER PROFILE, DYNAMICALLY DEFINE THE LOGIN/PROFILE PICTURE 
    renderContent() {
        switch (this.props.auth.data) {
            case null:
                return;
            case false || "":
                return (
                    <Button href='/auth/google'>Login</Button>
                );
            default:
                return <img src={this.props.auth.data.googleImage} alt='Profile Image' />
        }
    }

// MY NAVIGATION COMPONENT WITH A {this.renderContent()} CALL
    render() {
        console.log(this.props.auth)
        return (
            <nav id="nav">
               ... this.renderContent() ...
            </nav>
        );
    }
}

function mapStateToProps(state) {
    return { auth: state.auth }
}
export default connect(mapStateToProps)(Navigation);

加载组件时，我收到一条错误消息“无法读取未定义的属性‘googleImage’”。 我知道这个动作是异步的，页面首先加载时还没有信息，然后浏览器收到信息，但我不确定如何解决这个问题请帮助。

谢谢，

Answer 1

根据上面截取的代码，听起来您的意图是在auth reducer 启动后的某个时间加载该组件。 这是一个合理的要求，但不是 React/Redux 以某种方式强制执行或凭直觉提出的要求。

当您在浏览器中测试您的页面时（并收到“无法读取未定义的属性‘googleImage’”错误），打开您的 Chrome 开发者工具并查看您的 Redux 商店。 你会发现虽然你有一个auth对象，但它可能没有任何属性。

安装并设置 Chrome 扩展Redux Dev Tools并重新加载您的页面。 打开开发控制台并浏览到 Redux 选项卡。 您应该会看到所有已触发的 Redux 操作的列表，以及每个操作产生的状态更改。 出现错误时，您可能会看到尚未触发任何 USER_LOGGED_IN 操作（或调用的任何操作），或者它确实触发了，但没有产生填充身份验证工具的状态更改。

如果逻辑操作是在包含此组件的页面加载后分派的，那么如果您确实需要保证在加载此组件时登录信息存在，那么您将需要更改应用程序操作系统的组织方式。

或者，您可以重组组件以在不存在授权信息时显示备用图标或元素。 然后，一旦发生登录分派（并且 reducer 填写了身份验证数据），您的组件将自动更新并重新呈现。