Проблема React-Native Picker - обрабатывать переключатели

Question

У меня проблема с компонентом выбора. так что, как вы видите, есть массив curriences со строками. Я использую Picker, чтобы выбрать что-то между ними, и у меня есть функция, которая включена в onValueChange prop в Picker, а затем возникает моя проблема с выбором предмета из Picker.

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

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

также добавив сюда целый код:

import React, {Component} from 'react';
import {View, Text, TextInput, Picker} from 'react-native';
class CurrencyCashScreen extends React.Component {
  state = {
    currencies: ['USD', 'AUD', 'SGD', 'PHP', 'EUR'],
    base: 'PLN',
    amount: '',
    convertTo: 'EUR',
    result: '',
    date: '',
  };

  handleSelect = (itemValue, itemIndex) => {
    this.setState(
      {
        ...this.state,
        currencies: [itemValue],
        result: null,
      },
      this.calculate,
    );
  };

  handleInput = text => {
    this.setState(
      {
        ...this.state,
        amount: text,
        result: null,
        date: null,
      },
      this.calculate,
    );
  };

  calculate = () => {
    const amount = this.state.amount;
    if (amount === isNaN) {
      return;
    } else {
      fetch(`https://api.exchangeratesapi.io/latest?base=${this.state.base}`)
        .then(res => res.json())
        .then(data => {
          const date = data.date;
          const result = (data.rates[this.state.convertTo] * amount).toFixed(4);
          this.setState({
            ...this.state,
            result,
            date,
          });
        });
    }
  };

  handleSwap = e => {
    const base = this.state.base;
    const convertTo = this.state.convertTo;
    e.preventDefault();
    this.setState(
      {
        ...this.state,
        convertTo: base,
        base: convertTo,
        result: null,
      },
      this.calculate,
    );
  };
  render() {
    const {currencies, base, amount, convertTo, result} = this.state;
    return (
      <View>
        <Text>
          {amount} {base} is equevalent to
        </Text>
        <Text>
          {amount === '' ? '0' : result === null ? 'Calculating...' : result}{' '}
          {convertTo}
        </Text>
        <View>
          <View>
            <View>
              <TextInput
                keyboardType="numeric"
                value={amount}
                onChangeText={this.handleInput}
              />
              <Picker
                selectedValue={base}
                value={base}
                onValueChange={this.handleSelect}>
                {currencies.map((currency, index) => (
                  <Picker.Item label={currency} value={currency}>
                    {currency}
                  </Picker.Item>
                ))}
              </Picker>
            </View>
            <View>
              <TextInput
                editable={false}
                value={
                  amount === ''
                    ? '0'
                    : result === null
                    ? 'Calculating...'
                    : result
                }
              />
              <Picker
                selectedValue={convertTo}
                value={convertTo}
                onValueChange={this.handleSelect}>
                {currencies.map(currency => (
                  <Picker.Item label={currency} value={currency}>
                    {currency}
                  </Picker.Item>
                ))}
              </Picker>
            </View>
          </View>
          <View>
            <Text onClick={this.handleSwap}>CLICK ME</Text>
          </View>
        </View>
      </View>
    );
  }
}

export default CurrencyCashScreen;

Пожалуйста, помогите.

Answer 1

В вашей функции handleSelect вы переопределяете currencies, сохраненный в состоянии, со списком, содержащим только выбранную валюту. Вам следует прекратить это делать.

Почему бы не установить значение selectedCurrency в состояние и не использовать его для заполнения средства выбора текущим значением, а обновить его при вызове handleSelect?

Обновлено для добавления дополнительной справки

Когда вы инициализируете свое состояние, вы устанавливаете валюты следующим образом:

state = {
    currencies: ['USD', 'AUD', 'SGD', 'PHP', 'EUR'],

Когда вызывается ваша функция handleSelect, она меняет это список в состоянии:

handleSelect = (itemValue, itemIndex) => {
    this.setState(
      {
        ...this.state,
        currencies: [itemValue], // <-- HERE! You're changing the list of currencies
        result: null,
      },
      this.calculate,
    );
  };

После того, как это будет вызвано, ваш список валют будет именно тем, который вы выбрали в своем средстве выбора.

Именно поэтому, когда ваш компонент повторно отображает все остальные options vani sh:

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

const {currencies, base, amount, convertTo, result} = this.state;

Итак, в вашем средстве выбора при вызове currencies.map для создания Picker.Item компонентов у вас есть только одна валюта.

Следующая большая проблема заключается в том, что вы вызываете одну и ту же функцию handleSelect из каждого средства выбора ... поэтому вы не можете фактически выбрать две разные валюты.

Исправления: * 103 5 *

Во-первых, нам нужны две функции управления для ваших двух сборщиков:

handleSelectBase = base => this.setState({ base }, this.calculate)
handleSelectConvertTo = convertTo => this.setState({ convertTo }, this.calculate)

Затем обновите ваши два сборщика, чтобы использовать правильную функцию обработчика, и вы должны быть в лучшем положении.