javascript - React hook'larında diziyi sıraladıktan sonra nasıl render edebilirim

Ben prop olarak içinde nesneler olan bir dizi alıyorum ve sonra onları sıralamam ve render etmem gerekiyor, ama şimdi diziyi alıyorum ve sıraladıktan sonra sıralanmış diziyi render edemiyorum. useEffect kullanıyorum ve orada bir diziyi sıralayıp setState ile sıralanmış diziyi değişkene koyuyorum ama render etmeye çalıştığımda dizinin boş olduğu hatasını alıyorum. Bunu nasıl düzeltebilirim? Belki props.friendsList'i newFriends ile bir şekilde değiştirebilirim? Bu harika olurdu!

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) önce boş bir dizi gösterir ve sonra doldurur

Cevap #1

Bence arkadaşları doğrudan sıralamak daha iyi olur. useEffect ve state gereksiz. Bunu optimize tutmak için useMemo kullanmalısınız, ancak props.friendsList'in her renderda değişmediğinden emin olmanız gerekiyor:

const Friends: React.FC<FriendsProps> = props => {
  const sortedFriends = React.useMemo(
    () =>
      props.friendsList.sort((friendA, friendB) => {
        return friendA.online === friendB.online ? 0 : friendA.online ? -1 : 1;
      }),
    [props.friendsList]
  );

  console.log({sortedFriends});

  return (
    <div className='friends-list'>
      {/* now map over your sortedFriends array */}
      {sortedFriends.map((friendInfo, id) => {
        // add a key when you're mapping over an array
        return <h1 key={id}>{friendInfo.firstName}</h1>;
      })}
    </div>
  );
};