Question

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

@Import(MyConfig.class)
class MyClass {
    private MyConfig myConfig;

    @Autowired
    public MyClass(MyConfig myConfig) {
        this.myConfig = myConfig;
        System.out.println( myConfig.getValue1() );
    }
}

我像这样传递道具

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

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

更新：

我将自定义标记包装在 <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} /> 中并设置了 react-native-map，这使得 CustomMarker 不会在 iOS 中更新。对此有什么建议吗？

Answer 1

当你调用 setState 函数改变状态（或函数组件中 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>
            )
        }
        }

React 组件不会在 iOS 中重新渲染

1 个答案: