Question

我正在尝试在组件上获得持久状态。

使用控制台日志我可以看到AsyncStorage似乎保存并加载了值，并且该值似乎正确地进行了字符串化/解析。

根据从存储加载的值，状态似乎也会正确更新。

但是，<SegmentedControlTab>组件永远不会显示正确的selectedIndex;它总是默认为0或我手动分配给状态的任何东西。我希望一旦状态在componentDidMount函数中更新，<SegmentedControlTab>会自动更新selectedIndex以反映这一点：

import React, { Component } from 'react';
import { Text, ScrollView, AsyncStorage } from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab';


class Home extends Component {

  state = {
    //units: 1    //0=metric, 1=Imperial, 2=cups
  };

  componentDidMount = () => {   //Load unit setting
      AsyncStorage.getItem('units').then((value) => {
        if (JSON.parse(value) === 0 || JSON.parse(value) === 1 || JSON.parse(value) === 2) {
          this.setState({ units: JSON.parse(value) });
        }
        console.log('Value loaded: ', JSON.parse(value));
        console.log('State: ', this.state.units);
      });
   }

  render() {
    return (
      <ScrollView>
        <Text style={{ marginTop: 20, fontSize: 20 }}>Settings and that.</Text>
        <SegmentedControlTab
          values={['Metric', 'Imperial', 'Cups']}
          // tabStyle={{ borderColor: styleBackground }}
          // activeTabStyle={{ backgroundColor: styleBackground, borderColor: styleBackground }}
          selectedIndex={this.state.units}
          onTabPress={async (event) => {
            try {
              await AsyncStorage.setItem('units', JSON.stringify(event));
            } catch (error) {
              console.log('Some kind of terrible error');
            }
            this.setState({ units: event });
            console.log('Current state unit: ', this.state.units);
          }}
        />
      </ScrollView>
    );
  }
}

export default Home;

我出错的任何建议？

Answer 1

看起来这是第三方控件未按预期工作的情况; React Native的<SegmentedControlIOS>控件按预期工作（类似于上面的代码）。猜猜我需要玩<SegmentedControlTab>或找一个替代......

React Native中的持久状态：从AsyncStorage设置状态不会更新组件

1 个答案: