第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在 React hooks 中排序后如何渲染數(shù)組

在 React hooks 中排序后如何渲染數(shù)組

Helenr 2023-05-25 16:18:49
我通過(guò)帶有對(duì)象的 props 數(shù)組獲得,然后我需要對(duì)它們進(jìn)行排序和渲染,但現(xiàn)在我得到了數(shù)組,并且在排序之后我無(wú)法渲染排序的數(shù)組。我使用 useEffect 并在那里對(duì)數(shù)組進(jìn)行排序,然后通過(guò) setState 將排序后的數(shù)組放入變量中,但是當(dāng)我嘗試渲染它時(shí)出現(xiàn)錯(cuò)誤,即數(shù)組為空。我該如何解決?也許我可以用 newFriends 改變 props.friendsList?這將會(huì)非常棒!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) 首先顯示空數(shù)組然后填充
查看完整描述

1 回答

?
眼眸繁星

TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊

我認(rèn)為直接對(duì)朋友進(jìn)行排序會(huì)更好。useEffect 和 state 是不必要的。為了保持這種優(yōu)化,你應(yīng)該使用useMemo,但你需要確保props.friendsList在每次渲染時(shí)都不會(huì)改變:


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>

  );

};


查看完整回答
反對(duì) 回復(fù) 2023-05-25
  • 1 回答
  • 0 關(guān)注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)