Reactjs 每6个状态自动进行一次本机更新

每当我按下heart按钮时，它都会更新状态并调用TutorsCard.js中的renderhart方法，但当我向下滚动以获取更多配置文件时，它也会更新每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
                }
            />
    
        );
    }

    

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>
        
        );
    }
}

类提要扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
配置文件：新数据提供程序（（r1，r2）=>{
返回r1！==r2；
}),
加载：false，
喜欢：错，
颜色：“红色”，
刷新：错，
限额：10
};
this.layoutProvider=新的layoutProvider（（i）=>0，（type，dim）=>{
dim.width=宽度；
尺寸高度=250；
})
}
onRefresh=（）=>{
这是getProfiles（）；
}
shouldComponentUpdate（下一步，下一步状态）{
if（JSON.stringify（this.props）==JSON.stringify（nextrops）&&
this.state===nextState）{
log（“应该cmp更新提要为false”）
返回错误
}
if（JSON.stringify（this.props）！==JSON.stringify（nextrops）||
this.state！==nextState）{
log（“应该cmp更新提要为真”）
返回真值
}
}
onEndReach=async（）=>{
this.setState（{limit:this.state.limit+10}，this.getProfiles）
}
行渲染器=（类型，数据）=>{
返回(
user.id==数据。\u id）
真的吗
：错
}
/>
);
}

TutorCard.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
                }
            />
    
        );
    }

    

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>
        
        );
    }
}

类TutorCard扩展组件{
状态={
喜欢：错，
};
shouldComponentUpdate（下一步，下一步状态）{
if（JSON.stringify（this.props.item.\u id）==JSON.stringify（nextrops.item.\u id）&&
this.state.liked==nextState.liked）{
console.log（“cmp是否应该更新导师卡错误”）
返回错误
}
if（JSON.stringify（this.props.item.\u id）！==JSON.stringify（nextrops.item.\u id）||
this.state.liked！==nextState.liked）{
console.log（“cmp是否应更新导师卡为真”）
返回真值
}
}
异步类卡（）{
//服务器请求
this.setState（{liked:false}）；
const res=wait axios.post（IP地址+'/api/removeLikedProfile'，
{id:this.props.item.\u id}）；
this.props.fetchCurrentUser（）
}
异步dislikeCard（）{
//服务器请求
this.setState（{liked:true}）；
const res=wait axios.post（IP地址+'/api/addLikedProfile'，
{id:this.props.item.\u id}）；
this.props.fetchCurrentUser（）
}
大写=str=>{
返回str.charAt（0.toUpperCase（）+str.slice（1）；
};
渲染艺术=（）=>{
如果（！this.props.liked&！this.state.liked）{
返回(
this.dislikeCard（）}>
);
}
如果（this.props.liked | | this.state.liked）{
返回(
this.likedCard（）}>
);
}
}
render（）{
返回(
{this.renderHeart（）}
);
}
}

请提供一个简单的工作示例，以便于帮助您。也许你自己也会发现你的问题！再次检查，我刚刚减少了上面的代码。我找到了一个解决方法，不是每次用户按下like按钮时都更新liked状态，而是从数据库中获取liked配置文件并更新id匹配的liked状态。我不知道为什么每次用户按下like按钮更新like状态时react都会出现错误，这可能是我的逻辑不好，也可能是react native中的错误。