React Component 不会在 iOS 中重新渲染

Question

我有一个自定义标记组件。

export class CustomMarker extends Component {


devicesInRegion() {
    return this.props.devices.filter((device) => device.regionId == this.props.region.regionId)
}

deviceStatus() {
    let devicesInRegion = this.devicesInRegion()
    let criticalCount = 0
    let warningCount = 0
    let goodCount = 0
    let nrCount = 0
    let polling = 0
    
    devicesInRegion.map((device) => {
        if (this.props.critical.includes(device.sensorId)) {
            criticalCount += 1
        } 
        if (this.props.warning.includes(device.sensorId)) {
            warningCount += 1
        } 
        if (this.props.good.includes(device.sensorId)) {
            goodCount += 1
        } 
        if (this.props.NR.includes(device.sensorId)) {
            nrCount += 1
        }
        if (this.props.Polling.includes(device.sensorId)) {
            polling += 1
        }
    })

    this.setState({
        //Gives me Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. error
    })

    return {
        "critical": criticalCount,
        "warning": warningCount,
        "good": goodCount,
        'NR': nrCount,
        "Polling": polling
    }
}

render() {
    return (

        <View style={{ minWidth: RFPercentage(1.5), backgroundColor: '#fff', alignItems: 'flex-end' }}>
                <Text style={innerStyles.markerText}>{this.deviceStatus().critical}</Text>
                <Text style={innerStyles.markerText}>{this.deviceStatus().warning}</Text>                    
                <Text style={innerStyles.markerText}>{this.deviceStatus().good}</Text>                    
                <Text style={innerStyles.markerText} >{this.deviceStatus().Polling}</Text>
                <Text style={innerStyles.markerText} >{this.deviceStatus().NR}</Text>
        </View>
    )
}
}

我这样传递道具

<CustomMarker
  region={region}
  devices={this.state.userDevices}
  good={this.state.goodList}
  warning={this.state.warningList}
  critical={this.state.criticalList}
  NR={this.state.NRList}
  Polling={this.state.pollingList}
/>

在 Android 中，值会立即更新，但在 iOS 中，值始终显示为零。但是在控制台中正确的值正在打印。任何人都可以建议我，当值更改时我如何重新渲染组件。

更新：

我将自定义标记包装在 react-native-map 中并设置 tracksViewChanges={false} 这使得 CustomMarker 不会在 iOS 中更新。对此有何建议？

Answer 1

当你调用 setState 函数改变状态时，React 会重新渲染一个组件（或者 函数组件中 useState 钩子提供的函数）。

因此，子组件仅在父组件的状态已使用这些函数之一更改时更新。

我认为它可以工作。

    export class CustomMarker extends Component {
    constructor(props) {
      super(props);
      this.state = { 
      critical: 0,
      warning: 0,
      good: 0,
      NR: 0,
      Polling: 0
      }

    devicesInRegion() {
       return this.props.devices.filter((device) => device.regionId == this.props.region.regionId)
    }
    
     componentDidMount(){
        let devicesInRegion = this.devicesInRegion()
        let criticalCount = 0
        let warningCount = 0
        let goodCount = 0
        let nrCount = 0
        let polling = 0

        devicesInRegion.map((device) => {
            if (this.props.critical.includes(device.sensorId)) {
                criticalCount += 1
            } 
            if (this.props.warning.includes(device.sensorId)) {
                warningCount += 1
            } 
            if (this.props.good.includes(device.sensorId)) {
                goodCount += 1
            } 
            if (this.props.NR.includes(device.sensorId)) {
                nrCount += 1
            }
            if (this.props.Polling.includes(device.sensorId)) {
                polling += 1
            }
        })

        this.setState({
            critical: criticalCount,
            warning: warningCount,
            good: goodCount,
            NR: nrCount,
            Polling: polling
        });
      } 
                
        render() {
           const {critical,warning,good,NR,Polling} = this.state;
            return (
        
                <View style={{ minWidth: RFPercentage(1.5), backgroundColor: '#fff', alignItems: 'flex-end' }}>
                        <Text style={innerStyles.markerText}>{critical}</Text>
                        <Text style={innerStyles.markerText}>{warning}</Text>                    
                        <Text style={innerStyles.markerText}>{good}</Text>                    
                        <Text style={innerStyles.markerText} >{Polling}</Text>
                        <Text style={innerStyles.markerText} >{NR}</Text>
                </View>
            )
        }
        }