无法在 React 子组件中显示状态值

Question

在父组件中，我呈现了一个用户列表。每个用户都是一个用户项子组件。 我映射了一个对象的状态数组，以将每个 listitem 呈现为用户。它渲染了正确数量的人，但数据是空的。

下面是我父组件的相关代码。

const Search = ({
    auth: { isAuthenticated, user },
    getUsers,
    user: { users, loading }
}) => {
    useEffect(() => {
        getUsers();
        console.log(sunData);
    }, []);

    const [filteredUsersList, setFilteredUsersList] = useState({
        users: [],
        isFetching: false
    });

    //FILTER usersList.users ACCORDING TO VALUES IN sunData ARRAY
    useEffect(() => {
        // update the usersList
        const updatedUsersList = [];
        // //foreach index de usersList, si usersList.users[i]
        if (!usersAPIList) {
            return console.log("isEmpty");
        } else {
            for (let [key, userInfo] of Object.entries(users)) {
                //console.log(userInfo.username);
                if (sunData.indexOf(userInfo.sun) !== -1) {
                    updatedUsersList.push(userInfo);
                }
            }
        }

        setFilteredUsersList({ users: updatedUsersList, isFetching: false });
        console.log(updatedUsersList);
    }, [sunData]);

    return (
            <div className="usersList">
                <ul>
                    {filteredUsersList.users.map(userItem => (
                        <UserListItem user={userItem} />
                    ))}
                </ul>
            </div>
    );
};

Search.propTypes = {
    getUsers: PropTypes.func.isRequired,
    user: PropTypes.object.isRequired,
    auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    auth: state.auth,
    user: state.user
});

export default connect(mapStateToProps, { getUsers })(Search);

这是子组件。

const UserListItem = ({
    auth: { isAuthenticated },
    user: { username, sun, bio, canBeMessaged },
    getUserById
}) => {
    return (
        <li>
            <div className="namephoto">
                <img src={DefaultIcon} alt="Default avatar" />
            </div>

            <div className="userListInfo">
                <h1>{username}</h1>

                {sun}
                <div className="userListBio">{bio}</div>
            </div>
            <div className="userListActions">
                {canBeMessaged ? <i class="fas fa-envelope"></i> : ""}
                <i class="fas fa-plus-circle"></i>
            </div>
        </li>
    );
};

UserListItem.propTypes = {
    auth: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired,
    getUsersById: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
    auth: state.auth,
    user: state.user
});

export default connect(mapStateToProps, { getUserById })(UserListItem);

filteredUsersList.users 也正确记录。我看不出问题出在哪里以及为什么数据不会显示在 listitem 中。

这是filteredUsersList.users 的输出

Answer 1

我相信你的 redux 会覆盖你的子组件中的 prop user。

第一个解决方案

重命名您的 UserListItem 道具

<ul>
  {filteredUsersList.users.map(userItem => (
    <UserListItem userInfo={userItem} />
  ))}
</ul>

const UserListItem = ({
    auth: { isAuthenticated },
    userInfo: { username, sun, bio, canBeMessaged }, //from parent
    user, //from redux
    getUserById
})

第二种解决方案

在你的子组件中重命名你的 redux 属性

const mapStateToProps = state => ({
    authRdx: state.auth,
    userRdx: state.user
});

export default connect(mapStateToProps, { getUserById })(UserListItem);

const UserListItem = ({
    authRdx: { isAuthenticated },
    user: { username, sun, bio, canBeMessaged }, //from parent
    userRdx, //from redux
    getUserById
})

如果以上两种解决方案都不起作用，你应该尝试移除redux来逐步调试。只需保留您的 .map() 并尝试从子组件中记录 prop。

希望对您有所帮助，如果您仍然卡住，请随时添加 cmets