Javascript Can'；t在子组件中显示状态值

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

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

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

const Search=({
身份验证：{isAuthenticated，user}，
getUsers，
用户：{用户，正在加载}
}) => {
useffect（（）=>{
getUsers（）；
控制台日志（sunData）；
}, []);
常量[FilteredUserList，SetFilteredUserList]=useState({
用户：[]，
isFetching:错误
});
//根据sunData数组中的值筛选usersList.users
useffect（（）=>{
//更新用户列表
常量updateUsersList=[]；
////foreach索引de usersList，si usersList.users[i]
如果（！usersAPIList）{
返回console.log（“isEmpty”）；
}否则{
for（让Object.entries的[key，userInfo]（用户））{
//console.log（userInfo.username）；
if（sunData.indexOf（userInfo.sun）！=-1）{
updatedUsersList.push（用户信息）；
}
}
}
setFilteredUsersList（{users:updateUsersList，isFetching:false}）；
console.log（updateUsersList）；
}，[圣达]；
返回(

{filteredUsersList.users.map（userItem=>(
))}

);
};
Search.propTypes={
getUsers:PropTypes.func.isRequired，
用户：PropTypes.object.isRequired，
auth:PropTypes.object.isRequired
};
常量mapStateToProps=状态=>({
auth:state.auth，
用户：state.user
});
导出默认连接（mapStateToProps，{getUsers}）（搜索）；

这是子组件

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

const UserListItem=({
身份验证：{isAuthenticated}，
用户：{username，sun，bio，canBeMessaged}，
getUserById
}) => {
返回(

{username}
{sun}
{bio}
{canBeMessaged？：”“}

);
};
UserListItem.propTypes={
auth:PropTypes.object.isRequired，
用户：PropTypes.object.isRequired，
getUsersById:PropTypes.func.isRequired
};
常量mapStateToProps=状态=>({
auth:state.auth，
用户：state.user
});
导出默认连接（MapStateTops，{getUserById}）（UserListItem）；

filteredUsersList.users也可以正确记录。我不知道问题出在哪里，也不知道为什么数据不会显示在列表项中

---

这是filteredUsersList.users的输出

我相信您的redux会覆盖子组件中的prop

user

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

第一种解决方案 重命名您的

UserListItem

prop

<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，以便一步一步地进行调试。只需保留您的

.map（）

，并尝试从子组件记录道具

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

---

我希望这会有所帮助，如果您仍然被卡住，请随意添加评论

您是否尝试在您的子组件中记录

用户名、sun、bio、canBeMessaged

？Hurobaki是的，当您的问题来自您的父组件时，它是未定义的。你能给我看看

filteredUserList

的输出吗。并尝试将

userItem

记录在您的

.map

方法中？尝试在

UserListItem

中命名您的

user

属性，例如

userDetails

。例如<代码> <代码> -我认为ReDux正在覆盖您的用户支持，因为您在USSLISTITEM组件的末尾声明“代码> MAPSTATOSTPROSPOS/CODE”。@ HuRabaKi我编辑了这个问题，用OutPutter的屏幕截图来听它，如果我的帖子帮助您，请考虑以投票和接受的方式回答，谢谢！