在 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 => {

  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>

  );

};