Как получить доступ к переменной response-natve, определенной в конструкторе в render?

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

JavaScript way (this)

Сохраните его в this объекте (конструктор создает и возвращает его).

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

JavaScript way (переменная stati c) )

Сохраните его как переменную состояния c, которая будет доступна вне класса.

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

JavaScript способ (закрытие)

ps это возможно , но не рекомендуется (совсем не безопасно)

Вы можете поднять объявление переменной, переместив его за пределы своего класса. В этом случае все внутренние компоненты класса могут взять переменную из замыкания и прочитать / перезаписать эту переменную.

Способ реагирования (состояние)

Если вы хотите видеть обновления пользовательского интерфейса при изменении переменной, у вас есть использовать способ реактивности (подписка на изменения). 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' });

tip с setState

Метод this.setState isyn c, React обрабатывает этот метод в asyn c способ выполнить некоторые оптимизации, объединяя множество обновлений.

Так что если у вас есть такой код в методе класса, вы можете получить результат ниже. (обновление не немедленное)

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

Но ваш метод render() будет обрабатывать его правильно.

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

Answer 2

Вместо этого вы можете использовать состояния, чтобы получить доступ к компоненту рендеринга вашего компонента.

Инициировать в 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 docs.

Надеюсь, это поможет!