强制组件等待 redux 状态更新答案

【问题标题】：Force component to wait for redux state update强制组件等待 redux 状态更新
【发布时间】：2021-06-11 22:04:07
【问题描述】：

我知道这个问题被问了很多次，但没有一个答案对我有用。我得到了组件，它的工作是显示来自 react-redux 的用户数据，但是 userData 可以存储在 localStorage 中，并且在第一次加载网站时，这个 localStorage 被提取到 redux 状态，所以我得到了我想显示当前的首字母的错误登录用户。在将 async/await 添加到 mapStateToProps 函数 localStorage 后被获取，但我仍然收到错误消息“无法获得未定义的 0”，使用带有预设首字母的 useEffect 也会出错。这是我当前的代码：

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { ReactComponent as Person } from 'assets/person.svg'
import { ReactComponent as Add } from 'assets/add.svg'
import { ReactComponent as Settings } from 'assets/settings.svg'

import { Styled, Container, Button } from './styles'

const UserInfo = ({ initial }) => {
    let initials = 'UN'
    useEffect(() => {
        initials = initial
    }, [initial])
    return (
        <Styled>
            {initials}
            <Container>
                <Button>
                    <Add />
                </Button>
                <Button>
                    <Person />
                </Button>
                <Button>
                    <Settings />
                </Button>
            </Container>
        </Styled>
    )
}

const mapStateToProps = async ({ user }) => {
    const initial = await `${user.name[0]}${user.surname[0]}`
    return initial
}

export default connect(mapStateToProps)(UserInfo)

UserInfo.propTypes = {
    initial: PropTypes.string.isRequired,
}

我也尝试返回initial: initial || 'UNDEF'，但仍然收到错误消息。此外，当我在 VSC 保存时不刷新浏览器时，我不会收到错误消息。如何强制我的组件等待来自 react-redux 的道具

【问题讨论】：

标签： reactjs redux async-await react-redux

【解决方案1】：

这不是可以等待的：await '${user.name[0]}${user.surname[0]}' 这就是您仍然收到错误的原因。您不应该需要（或不希望，请参阅 https://react-redux.js.org/using-react-redux/connect-mapstate#mapstatetoprops-functions-should-be-pure-and-synchronous）使 mapStateToProps 异步。您可能已经使用异步 redux 操作进行异步调用。您应该检查是否存在用户名/姓氏，如果未定义则返回默认状态

const initial = user.name && user.surname ? '${user.name[0]}${user.surname[0]}' : 'UNDEF';

或为用户状态添加isUserLoaded 标志并返回默认状态、加载指示符，或者在该标志为真之前不渲染该部分 UI。

【讨论】：

我试过像你说的那样做，但这仍然给我一个错误 '0 of undefined' ，这是因为 Redux 存储在页面加载时是空的，所以页面必须等待几毫秒。我用另一种方式做到了。我将其添加为答案
好的。在 mapStateToProps 中执行所有操作也应该有效： const mapStateToProps = ({ user }) => ({ initial: user.name && user.surname ? '${user.name[0]}${user.surname[0]} ' : '' })

【解决方案2】：

我做了一点，但现在它工作了，我使用了 useState 和 useEffect 挂钩并更改了一点 mapStateToProps，这就是我的解决方案：

const [initials, setInitials] = useState('')
useEffect(() => {
    if(name && surname) {
        setInitials(`${name[0]}${surname[0]}`)
    }
}, [name, surname])

和简单的 mapStateToProps

const mapStateToProps = ({ user }) => ({
    name: user.name,
    surname: user.surname,
})

【讨论】：