Question

我知道这个问题被问了很多次，但没有一个答案适合我。我得到了这个组件，它的工作是显示来自 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 的 props

Answer 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 异步。您可能已经使用 async redux action 进行了异步调用。您应该检查是否存在用户名/姓氏，如果未定义则返回默认状态

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

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

Answer 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,
})

强制组件等待 redux 状态更新

2 个答案: