SegmentedControlIOS forceUpdate

Question

I react-native's SegmentedControlIOS component for choosing between three values which works fine so far. However, when my application is loading data I want to ensure that the user can not change the value associated with that control as this would cause concurrency issues and interrupts the update.

Thus I decided that the method for handling the control's value change only calls the callback supplied via a property if the loading process is currently not active. Otherwise, I call this.forceUpdate() in order to rerender the host component which includes setting the selectedIndex property of the segmented control. However, when this.forceUpdate is invoked the selected index does not change. Therefore, I decided to print the value selectedIndex is set to which always displays the initial (wished) index.

Below you can see the code of my rendering method for displaying the segmented control:

render: function()
{
    ...
    var indexBluetoothAutostart = 0;
    switch (this.props.data.BluetoothAutostartState)
    {
        case BluetoothAutostartState.OFF:
            indexBluetoothAutostart = 1;
            break;
        case BluetoothAutostartState.ON:
            indexBluetoothAutostart = 2;
            break;
        case BluetoothAutostartState.AUTO:
            indexBluetoothAutostart = 0;
            break;
    }
    console.log("index: " + indexBluetoothAutostart);
    ...
    return (
        ...
        <SegmentedControlIOS selectedIndex={indexBluetoothAutostart}
            momentary={false}
            onValueChange={(newValue) => this.changeBluetoothAutostartState(newValue)}
            values={[Localization.HomeFragment.BluetoothAutostartState.btnAuto, Localization.HomeFragment.BluetoothAutostartState.btnOff, Localization.HomeFragment.BluetoothAutostartState.btnOn]}/>
    );
}

Finally, the following snippet shows the onValueChange handler:

changeBluetoothAutostartState: function(newValue)
{
    if (newValue === Localization.HomeFragment.BluetoothAutostartState.btnAuto)
    {
        if (this.props.bluetoothConnectionBusy === true)
        {
            Toast.display(Localization.BluetoothOperationInProgress.msgWaitForUploadToFinishToast);
            this.forceUpdate();
        }
        else
        {
            this.props.onBluetoothAutostartStateChange(BluetoothAutostartState.AUTO);
        }
    }
    // process the other two options
    ...
}

I appreciate any help. Thanks in advance.

Answer 1

我只是简单地将一个用'Date.now（）'初始化的时间戳变量添加到类的状态，而不是调用'this.forceUpdate'我更新了状态的时间戳：

this.setState({ timestamp: Date.now() });