自动响应本机更新，每6个状态

Question

每当我按下心形按钮时，它都会更新状态并在TutorsCard.js中调用renderHeart方法，但是当我向下滚动以获取更多配置文件时，它也会更新每6张卡的状态，依此类推，以便它们看起来也很受欢迎。这可能是TutorsCard.js中的shouldComponentUpdate的问题，我多次更改了ShouldComponentUpdate，但没有用。

Feed.js

class Feed extends Component {
    constructor(props) {
        super(props);


        this.state = {
            name: '',
            profiles: new DataProvider((r1, r2) => {
                return r1 !== r2;
            }),
            loading: false,
            liked: false,
            color: 'red',
            refreshing: false,
            limit: 10

        };

        this.layoutProvider = new LayoutProvider((i) => 0, (type, dim) => {
            dim.width = width;
            dim.height = 250;
        })
    }

    onRefresh = () => {
        this.getProfiles();
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (JSON.stringify(this.props) === JSON.stringify(nextProps) &&
            this.state === nextState) {
            console.log("should cmp update feed false")
            return false
        }
        if (JSON.stringify(this.props) !== JSON.stringify(nextProps) ||
            this.state !== nextState) {
            console.log("should cmp update feed true")

            return true
        }
    }

    onEndReach = async () => {
        this.setState({ limit: this.state.limit + 10 }, this.getProfiles)
    
    }

    rowRenderer = (type, data) => {

        return (
            <TutorCard
                item={data}
                navigation={this.props.navigation}
                liked={
                    this.props.auth.likedProfiles.some((user) => user.id === data._id)
                        ? true
                        : false
                }
            />
    
        );
    }

    

TutorCard.js

class TutorCard extends Component {

      state = {
            liked: false,
        };


    shouldComponentUpdate(nextProps, nextState){
       if(JSON.stringify(this.props.item._id) === JSON.stringify(nextProps.item._id) && 
       this.state.liked === nextState.liked){
           console.log("should cmp update tutors card false")
           return false
       }
       if(JSON.stringify(this.props.item._id) !== JSON.stringify(nextProps.item._id) ||
       this.state.liked !== nextState.liked){
        console.log("should cmp update tutors card true")

           return true
       }
    }


    async likedCard() {
        //server request
        this.setState({ liked: false });
        const res = await axios.post(IP_ADDRESS + '/api/removeLikedProfile',
            { id: this.props.item._id });
        this.props.fetchCurrentUser()

    }
    async dislikeCard() {
        //server request
        this.setState({ liked: true });
        const res = await axios.post(IP_ADDRESS + '/api/addLikedProfile',
            { id: this.props.item._id });
        this.props.fetchCurrentUser()
    }

    capitalize = str => {
        return str.charAt(0).toUpperCase() + str.slice(1);
    };

    renderHeart = () => {

        if (!this.props.liked && !this.state.liked) {
            return (
                <TouchableOpacity onPress={() => this.dislikeCard()}>
                    <AntDesign name="hearto" size={normalize(23)} color="#26a03a" />
                </TouchableOpacity>
            );
        }

        if(this.props.liked || this.state.liked){
        return (
            <TouchableOpacity onPress={() => this.likedCard()}>
                <AntDesign name="heart" size={normalize(23)} color="red" />
            </TouchableOpacity>
        );
    }

    }

    render() {
        

        return (
                       <View>

                            <Button style={{
                                flexDirection: 'row', flex: 1,
                                justifyContent: 'flex-end'
                            }}
                                transparent>{this.renderHeart()}</Button>
                        </View>
        
        );
    }
}