React-Native Picker问题——处理开关项

Question

我的 Picker 选择器组件有问题。所以你看到有一个带有字符串的 curriences 数组。我使用 Picker 在它们之间进行选择，并且我具有 Picker 中 onValueChange 道具所包含的功能，然后我的问题是从选择器中选择一个项目。

首先我可以从选择器中选择任何项目，但是当我想再次选择时，我在列表中只有这个选择的项目： multiple items 然后我选择了例如欧元。当我想再次选择一个项目时，我只有这个： enter image description here

此外，当我更改第一个选择器项目时 - 它也会在第二个选择器中发生变化...不知道为什么。

同时在此处添加完整代码：

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 存储在状态中的列表，该列表仅包含所选货币。你应该停止这样做。

为什么不在 state 中设置一个 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,
    );
  };

调用此函数后，您的货币列表就是您在选择器中选择的货币。

这就是为什么当您的组件重新呈现所有其他选项时消失的原因：

你得到了货币状态，现在它只是一个包含你选择的货币的数组：

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

因此，当您调用 currencies.map 创建 Picker.Item 组件时，在您的选择器中，您只有一种货币。

下一个大问题是您从每个选择器调用相同的 handleSelect 函数...所以您实际上不能选择两种不同的货币。

修复：

首先，我们需要为您的两个选择器提供两个句柄函数：

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

然后更新你的两个选择器以使用正确的处理函数，你应该处于更好的位置。

React-Native Picker问题——处理开关项

React-Native Picker problem - handle switch items

javascript

state

picker

react-native