React Native Picker问题-处理开关项

Question

我的Picker选择器组件有问题。正如你所看到的，有一个带有字符串的curriences数组。我使用Picker在它们之间选择一些，我有一个函数，它包含在Picker中的onValueChange道具中，然后出现了从Picker中选择项目的问题。

首先，我可以从选择器中选择任何项目，但当我想再次选择时，我在列表中只有这个选择的项目：多个项目然后我选择了例如欧元。当我想再次选择一个项目时，我只有这个：在此处输入图像描述

此外，当我更改第一个选取器项目时，它也会在第二个选取器中更改。。。不知道为什么。

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

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,
);
};

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

这就是为什么当你的组件重新渲染时，所有其他选项都消失了：

你把货币从州里拿出来，现在它只是一个数组，包含你选择的一个：

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)

然后更新您的两个拾取器以使用正确的处理程序函数，您应该处于更好的位置。