在 React hooks 中排序后如何渲染数组

Question

我通过带有对象的 props 数组获得，然后我需要对它们进行排序和渲染，但现在我得到了数组，并且在排序之后我无法渲染排序的数组。我使用 useEffect 并在那里对数组进行排序，然后通过 setState 将排序后的数组放入变量中，但是当我尝试渲染它时出现错误，即数组为空。我该如何解决？也许我可以用 newFriends 改变 props.friendsList？这将会非常棒！

type FriendsProps = {

    friendsList:

    {

        "id": number,

        "firstName": string,

        "lastName": string,

        "photoUrl": string,

        "online": boolean

    }[]

}

const Friends: React.FC<FriendsProps> = (props) => {

    const [friends, setFriends] = useState([{}]);

    useEffect(() => {

        const newFriends = props.friendsList.sort((friendA, friendB) => {

            return friendA.online === friendB.online ? 0 : friendA.online ? -1 : 1;

        })

        setFriends(newFriends)

    }, []);

    console.log(friends)

    

    return (

            <div className="friends-list">

                {friends.map((friendInfo, id) => {

                    return (

                        <h1>{friendInfo.firstName}</h1>

                    )

                })}

            </div>

    );

};

console.log (friends) 首先显示空数组然后填充

Answer 1

我认为直接对朋友进行排序会更好。useEffect 和 state 是不必要的。为了保持这种优化，你应该使用useMemo，但你需要确保props.friendsList在每次渲染时都不会改变：const Friends: React.FC<FriendsProps> = props => {&nbsp; const sortedFriends = React.useMemo(&nbsp; &nbsp; () =>&nbsp; &nbsp; &nbsp; props.friendsList.sort((friendA, friendB) => {&nbsp; &nbsp; &nbsp; &nbsp; return friendA.online === friendB.online ? 0 : friendA.online ? -1 : 1;&nbsp; &nbsp; &nbsp; }),&nbsp; &nbsp; [props.friendsList]&nbsp; );&nbsp; console.log({sortedFriends});&nbsp; return (&nbsp; &nbsp; <div className='friends-list'>&nbsp; &nbsp; &nbsp; {/* now map over your sortedFriends array */}&nbsp; &nbsp; &nbsp; {sortedFriends.map((friendInfo, id) => {&nbsp; &nbsp; &nbsp; &nbsp; // add a key when you're mapping over an array&nbsp; &nbsp; &nbsp; &nbsp; return <h1 key={id}>{friendInfo.firstName}</h1>;&nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </div>&nbsp; );};