Невозможно отобразить значения состояния в дочернем компоненте 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);

FilterUsersList.users также регистрируется правильно. Я не вижу, в чем проблема и почему данные не будут отображаться в listitem .

. Вот выходные данные FilterUsersList.users

Answer 1

Я полагаю, что ваш излишек перезаписывает вашу подпорку 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
})

Второе решение

Переименуйте вашу подпорку в вашем дочернем компоненте

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

Если два вышеупомянутых решения не сработали, вы должны попытаться удалить излишки для отладки шаг за шагом. Просто сохраните .map() и попробуйте зарегистрировать подпорку от дочернего компонента.

Надеюсь, это поможет, не стесняйтесь добавлять комментарии, если вы все еще застряли