reactjs 如何检查一个对象的值是否存在于另一个对象中？

r8uurelv 于 2022-11-22 发布在 React

关注(0)|答案(1)|浏览(216)

我想做跟随/取消跟随切换按钮，跟随/跟随列表（数组中的对象）将从服务器单独调用。跟随列表需要同时具有取消跟随/跟随按钮状态。当我调用跟随列表时，我如何检查跟随我的人的ID是否与我的跟随列表的ID匹配并反映在按钮上？
以下示例，数组中follower对象

[{id: 1, profileImg: xxx},{id: 2, profileImg: xxx},{id: 3, profileImg: xxx}... ]

我的代码在下面的js

const {  select } = props;
    const [choice, setChoice] = useState(select);
    const [followingList, setFollowingList] = useState([]);
    const [followerList, setFollowerList] = useState([]);
    

    const handleChoice = (e) => {
        setChoice(e.target.value);
    };
    

    useEffect(() => {
        getFollowing()
            .then((res) => {
                setFollowingList(res);
            })
            .then(
                getFollower().then((res) => {
                    setFollowerList(res);
                }),
            );
    }, []);

我的html代码

<Container onClick={(e) => e.stopPropagation()}>
    <TogglebtnContainer>
         <ToggleBtn onClick={handleChoice} value="following" choice{choice}>Following</ToggleBtn>
         <ToggleBtn onClick={handleChoice} value="follower" choice={choice}>Follower</ToggleBtn>
    </TogglebtnContainer>
        <FollowContainer>
          <Follow>
        {choice === 'following'? (followingList.map((follow, idx) => {
        return (
                        <div className="follow-item" key={idx}>
            <div className="follow-img"><img src={follow.profileImg} alt="UserPic" />             </div>
            <div className="follow-name">{follow.nickname}</div>
                <FollowBtn key={follow.id}>Unfollow</FollowBtn></div>
                                            );})
        : (followerList.map((follow, idx) => {
            return (
                <div className="follow-item" key={idx}>
                <div className="follow-img">
                <img src={follow.profileImg} alt="UserPic" />
                </div>
                <div className="follow-name">{follow.nickname}</div>
                <FollowBtn key={follow.id}>follow</FollowBtn>
                </div>
                                               })}
      </Follow>
      </FollowContainer>
      </Container>

我想我可以检查这个ID是否与我的追随列表的ID匹配，并创建一个新的布尔状态。（ex [isFollow，setIsFollow = useState（false）），但找不到方法。

getFollower().then((res) => {
    setFollowerList(res);

reactjs

来源：https://stackoverflow.com/questions/74506085/how-to-check-if-the-value-of-one-obj-exists-in-the-another-obj

1条答案

按热度按时间

xfb7svmp1#

了解用户已经关注的关注者以及关注/取消关注关注者

short answer, set a flag when loading the data

  useEffect(() => {

      let isValidScope = true;
         
      const fetchData = async () => {

         const followingList =  await getFollowing();
         if (!isValidScope) { return; }

         setFollowingList(followingList);

         let followersList = await getFollower();
         if (!isValidScope) { return; }

         const followingUserIds = followingList?.map(f => f.id)

         followersList = followersList?.map(follower => {
             return followingUserIds?.includes(follower.id) ? 
                     { ...follower, isFollowing: true } : follower
         }

         setFollowerList(followersList)

      }

      fetchData()

      return () => { isValidScope = false }

    }, []);

    const onFollowFollower = (followerId) => {
         const followersList = followerList?.map(follower => {
             return follower.id === followerId ? 
                     { ...follower, isFollowing: true } : follower
         }
         setFollowerList(followersList)
    }

    const onUnfollowFollower = (followerId) => {
        const followersList = followerList?.map(follower => {
             return follower.id === followerId ? 
                     { ...follower, isFollowing: false } : follower
         }
         setFollowerList(followersList)
    }

呈现代码

<Follow>
        {choice === 'following'? (followingList.map((follow, idx) => {
              return (
                 <div className="follow-item" key={idx}>
                     <div className="follow-img"><img src={follow.profileImg} alt="UserPic" />             </div>
                      <div className="follow-name">{follow.nickname}</div>
                      <FollowBtn key={follow.id}>Unfollow</FollowBtn>
                  </div>
               );})
               : (followerList.map((follow, idx) => {
                     return (
                       <div className="follow-item" key={idx}>
                          <div className="follow-img">
                            <img src={follow.profileImg} alt="UserPic" />
                           </div>
                           <div className="follow-name">{follow.nickname}</div>
                              
                              { follow?.isFollowing ? <FollowBtn () => onUnfollowFollower(follow.id)>Unfollow</FollowBtn> : null }
                               { !follow?.isFollowing ? <FollowBtn onClick={() => onFollowFollower(follow.id)>Follow</FollowBtn> : null }
                       </div>
          })}
    </Follow>

您可以在新的React文档中阅读有关working with list的信息
如果您在每次更改时都要重新获取关注者和关注者列表，最好在每次更改时使用useMemo重新计算关注者列表
希望这对你有所帮助

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 如何检查一个对象的值是否存在于另一个对象中？

1条答案

相关问题

热门标签

最新问答