react的this.setState没有触发render

一、浅比较

出现情况: 明明改变了值, 并且回调函数也触发了, 但是就是不触发render

import React, { PureComponent } from 'react'
import {
    InputNumber
} from 'antd'

export default class example extends PureComponent{
    //... 
    state = {
        fruit: [{
            type: 'bannana',
            count: 0
        },{
            type: 'apple',
            count: 0
        }]
    }
    handleChange(val, type){
        let { fruit } = this.state;
        fruit.map(item => {
            if(item.type == type) item.count = val 
        })
        this.setState({
            fruit,
        },() => {
            console.log('触发回调函数')
        })
    }
    
    render(){
        console.log('触发render')
        return(
            <InputNumber onChange={(val) => this.handleChange(val,'apple')} />
        )
    }
}

出现了浅比较, 不触发render生命周期

解决方法: 赋值的时候改变fruit的指向.

this.setState({
    fruit: [...fruit]
},() => {
    console.log('触发回调函数')
})

转载于:https://www.cnblogs.com/soyxiaobi/p/10065003.html