我怎样才能使 useEffect 不是 return 的初始值？当我尝试将对象数组传递到组件时，我总是得到空数组

Question

我试图将一组注册用户传递到一个组件中，但是我不能，因为它总是在实际呈现正确内容之前呈现初始空数组。我试过使用 useRef 还是不行。

const Home = () => {
const nav = useNavigate()

const [userList, setUserList] = useState([]);
const [loggedInUser, setLoggedInUser] = useState({});
const [currentChat, setCurrentChat] = useState(undefined);
const [showMenu, setShowMenu] = useState(false);
useEffect(() => {       
    const setLoggedIn = async() => {
        if (!localStorage.getItem('loggedInUser')) {

            nav('/');
        } else {
            setLoggedInUser(await JSON.parse(localStorage.getItem('loggedInUser')))
        }
    }

    setLoggedIn().catch(console.error);
}, [])

useEffect(() => {
        const fetchUsers = async () => {

            const data = await axios.get(`${allUsersRoute}/${loggedInUser._id}`);
            setUserList(data.data);
        }

        fetchUsers().catch(console.error);
}, [loggedInUser._id])

console.log(userList);

return (
    <div id='container'>

        <div id='sidebar'>
            <div>
                <div id='home-header'>
                    <h1>DevsHelp</h1>
                </div>

                <Userlist props={userList}/>
            </div>
        </div>
    )};

这是我要渲染的组件。

const Userlist = (props) => {

return (
        <div>
            <div id='home-header'>
                <h1>DevsHelp</h1>
            </div>

            <div id='userlist'>
                {props.map((prop) => {
                    {console.log(props.length)}
                    return (
                        <div className='user'>
                            <h3>{prop.username}</h3>
                        </div>
                    )
                })}
            </div>
        </div>
)}
export default Userlist;

所以基本上，react returns .map 不是函数，我认为这是因为数组为空。我是 React 的新手，所以如果有人能帮助我，我将不胜感激。谢谢！

Answer 1

我不会将组件的道具命名为“道具”，真的：

<Userlist props={userList}/>

如果你真的想要，那么至少在 Userlist 中，你需要引用 props 对象：

props.props.map...

将您的道具命名为对您有意义的名称，例如“用户”。然后调用 props.users.map(user => {...})

一个 React 组件可以带很多 props。当你想在组件内部访问它们时，你需要通过名称来访问它们。在你的例子中，你定义了 Userlist 是这样的：

function Userlist(props){...}

在这种情况下，必须通过 props 对象访问所有道具。当您调用 <Userlist props={userList]} />

时，您在此对象中定义了一个 props 值

就个人而言，我总是在定义新组件时解构 props，如下所示：

function Userlist({users}) {...}

附带说明一下，如果您解构了 props 对象，您的代码就会正常工作：function Userlist({props}) {...} 我想这将是使代码正常工作所能做的最小更改。但同样，我不会使用“道具”作为道具的名称。

Answer 2

问题是您映射的是 props 对象，而不是 userList。尝试执行以下操作：

const Userlist = (props) => {

return (
        <div>
            <div id='home-header'>
                <h1>DevsHelp</h1>
            </div>

            <div id='userlist'>
                // use props.users.map instead of props.map
                {props.users.map((user) => {

                    return (
                        <div className='user'>
                            <h3>{user.username}</h3>
                        </div>
                    )
                })}
            </div>
        </div>
)}
export default Userlist;

并在 Home 组件将 UserList 的属性更改为 users，以避免混淆

<Userlist users={userList}/>

我怎样才能使 useEffect 不是 return 的初始值？当我尝试将对象数组传递到组件时，我总是得到空数组

How can I make useEffect not return the initial value? I keep getting empty array when I'm trying to pass an array of objects into a component

javascript

node.js

reactjs

use-effect