如何访问渲染中构造函数中定义的 react-native 变量？

Question

我是新来的反应原生并在定义/访问变量时遇到问题我所做的是

  export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    const unit = [
      {label: 'mm', value: 'mm'},
      {label: 'cm', value: 'cm'},
      {label: 'meters', value: 'm'},
      {label: 'km', value: 'km'},
      {label: 'inches', value: 'in'},
      {label: 'feet', value: 'ft'},
      {label: 'yards', value: 'yd'},
      {label: 'miles', value: 'mi'},
      {label: 'nautical miles', value: 'nmi'},
    ];
    var selectedValue = 'mm';
  }

  render() {
    return (
      <View style={styles.screen}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.body}>
            <View style={styles.rowContainer}>
              <Text style={styles.text}>Scale Ratio </Text>
              <TextInput style={styles.textInput}>1</TextInput>
              <TextInput style={styles.textInput}>12</TextInput>
            </View>
            <View style={styles.rowContainer}>
              <Text style={styles.text}>Real Length </Text>
              <TextInput style={styles.textInput}>120</TextInput>
              {/* <TextInput style={styles.textInput}>mm</TextInput> */}
              <View style={styles.container}>
                <Picker
                  selectedValue={selectedValue}
                  style={{height: 50, width: 150}}
                  onValueChange={(itemValue, itemIndex) =>
                    setSelectedValue(itemValue)
                  }>
                  {unit.map(item => (
                    <Picker.Item label={item.label} value={item.value} />
                  ))}
                </Picker>
                {/* <RNPickerSelect
                style={styles.textInput}
                onValueChange={value => console.log(value)}
                items={this.unit}
              /> */}
              </View>
            </View>
            <View style={styles.rowContainer}>
              <Text style={styles.text}>Scale Length </Text>
              <TextInput style={styles.textInput}>10</TextInput>
              <TextInput style={styles.textInput}>mm</TextInput>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

但我遇到了错误

我无法同时访问unit 和selectedValue

Answer 1

相反，您可以使用状态，以便可以在组件的渲染部分中访问。

在constructor中初始化你的组件状态如下：

constructor(props) {
    super(props);

    this.state = {
      unit: [
         /* your items */
      ],
      selectedValue: 'mm'
    }
}

然后您可以使用this.state.unit 或this.state.selectedValue 访问。

例如在<Picker /> 组件中，如下所示：

<Picker selectedValue={this.state.selectedValue}
        style={{height: 50, width: 150}}
        onValueChange={(itemValue, itemIndex) =>
        setSelectedValue(itemValue)
}>
    {unit.map(item => <Picker.Item label={item.label} value={item.value} /> )}
</Picker>

我建议仔细阅读 React 文档的 Adding Local State to a Class 部分。

我希望这会有所帮助！

Answer 2

JavaScript方式（本）

将其保存到this 对象（构造函数创建并返回它）。

/* inside of constructor */
this.selectedValue = 'mm';
/* outside of constructor, but inside of class mthods*/
console.log(this.selectedValue); // 'mm'
this.selectedValue = 'qq';

JavaScript方式（静态变量）

将其保存为静态变量，在类外可用。

/* inside of constructor */
HomeScreen.selectedValue = 'mm';
/* outside of constructor, inside AND outside of class*/
console.log(HomeScreen.selectedValue); // 'mm'
HomeScreen.selectedValue = 'qq';

JavaScript方式（闭包）

附言这是可能的，但不推荐（根本不安全）

您可以将变量声明提升到课堂之外。在这种情况下，所有类内部都可以从闭包中获取变量并读取/重写该变量。

反应方式（状态）

如果您想在更改变量时看到 UI 更新，则必须使用响应式方式（更改时订阅）。 Reacts 为它提供了props 和state。如果你想处理内部反应类变量，你应该使用state。在这种情况下，每次更改状态时，您的 React 都会调用类 render() 方法。

/* inside of constructor */
this.state = { selectedValue: 'mm' };
/* outside of constructor, inside of class methods */
console.log(this.state.selectedValue); // 'mm'
this.setState({ selectedValue: 'qq' });

使用 setState 提示

方法 this.setState 是异步的，React 以异步方式处理此方法以进行一些优化，将许多更新批处理在一起。

所以如果你在类方法中有这样的代码，你可能会得到下面的结果。 （更新不是即时的）

this.setState({ selectedValue: 'qq' });
console.log(this.state.selectedValue) // 'mm'

但是您的render() 方法会正确处理它。

render() {
  console.log(this.state.selectedValue); // 'qq'
  /* ... */
}