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('觸發回調函數')
})