Javascript 映射不是react native中的函数和选择器问题

我对映射我的货币数组有问题。 正如你看到的，有一个带字符串的currences数组。我使用Picker在它们之间进行选择，我有Picker中包含的

onValueChange

prop的函数，然后我就遇到了从Picker中选择项目的问题

首先，我可以从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;

import React，{Component}来自'React'；
从“react native”导入{View，Text，TextInput，Picker}；
类CurrencyCashScreen扩展React.Component{
状态={
货币：[‘美元’、‘澳元’、‘新加坡元’、‘菲律宾元’、‘欧元’]，
基地：“印尼国家电力公司”，
金额：''，
兑换成：'欧元'，
结果：“”，
日期：''，
};
handleSelect=（itemValue，itemIndex）=>{
这是我的国家(
{
…这个州，
货币：[项目价值]，
结果：空，
},
这个,算算,，
);
};
handleInput=文本=>{
这是我的国家(
{
…这个州，
金额：文本，
结果：空，
日期：空，
},
这个,算算,，
);
};
计算=（）=>{
const amount=this.state.amount；
如果（金额===isNaN）{
返回；
}否则{
取回(`https://api.exchangeratesapi.io/latest?base=${this.state.base}`）
.then（res=>res.json（））
。然后（数据=>{
const date=data.date；
const result=（data.rates[this.state.convertTo]*amount.toFixed（4）；
这是我的国家({
…这个州，
结果,，
日期，
});
});
}
};
handleSwap=e=>{
const base=this.state.base；
const convertTo=this.state.convertTo；
e、 预防默认值（）；
这是我的国家(
{
…这个州，
转换到：基础，
基地：convertTo，
结果：空，
},
这个,算算,，
);
};
render（）{
const{currences，base，amount，convertTo，result}=this.state；
返回(
{amount}{base}等于
{amount=='''0'：result==null？'computing…'：result}{'}
{convertTo}
{货币.map（（货币，指数）=>(
{货币}
))}
{货币.map（货币=>(
{货币}
))}
点击我
);
}
}
导出默认货币现金屏幕；

请提供帮助。

技术上要求对变量执行数组

我猜

itemValue

不是传递给

handleSelect

的数组。这就是为什么你会犯这样的错误。我认为，如果您将代码修改为将

货币

作为数组处理，那么它应该可以工作

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

---

我希望这有帮助

货币很可能不是数组。以下是我的建议：

• 检查以确保您在渲染函数的前面正确地分解了状态，如

  const{currences}=state此处的任何输入错误都可能导致错误

• 确保

  货币

  设置为正常默认值。如果组件首次装载时未定义

  货币

  ，则会出现此错误
• 使用

  console.log

  ，或调试器查看

  货币的值。如果在调用
  currences.map
  方法时它不是数组（包括
  未定义的
  ），则会出现此错误

参见下面的示例

您需要两个独立的函数

import React, {Component} from 'react';
import {View, Text, TextInput, Picker} from 'react-native';

class CurrencyCashScreen extends Component {
 state = {
    currencies: ['USD', 'AUD', 'SGD', 'PHP', 'EUR'],
    base: 'PLN',
    convertTo: 'EUR',
    amount: '',
    result: '',
    date: '',
  };

 handleSelectPicker1 = itemValue => {
    this.setState(
      {
      base:itemValue
      },
    );
  };

  handleSelectPicker2 = itemValue => {
    this.setState(
      {
        convertTo:itemValue
      },
    );
  };

render() {
    const {currencies, base, amount, convertTo, result,pickerValue1,pickerValue2} =     this.state;
    console.log('this.state',pickerValue1,pickerValue2)
    return (
      <View style={{flex:1}}>
              <Picker
                selectedValue={base}
                //value={base}
                onValueChange={this.handleSelectPicker1}>
                {currencies.map((currency, index) => (
                  <Picker.Item label={currency} value={currency}/>
                ))}
              </Picker>

              <Picker
                selectedValue={convertTo}
                //value={convertTo}
                onValueChange={
                this.handleSelectPicker2
                }>
                {currencies.map(currency => (
                  <Picker.Item label={currency} value={currency}/>
                ))}
              </Picker>
          </View>
    );
  }

}

export default CurrencyCashScreen;

import React，{Component}来自'React'；
从“react native”导入{View，Text，TextInput，Picker}；
类CurrencyCashScreen扩展组件{
状态={
货币：[‘美元’、‘澳元’、‘新加坡元’、‘菲律宾元’、‘欧元’]，
基地：“印尼国家电力公司”，
兑换成：'欧元'，
金额：''，
结果：“”，
日期：''，
};
handleSelectPicker1=itemValue=>{
这是我的国家(
{
基数：itemValue
},
);
};
handleSelectPicker2=itemValue=>{
这是我的国家(
{
convertTo:itemValue
},
);
};
render（）{
const{currences，base，amount，convertTo，result，pickerValue1，pickerValue2}=this.state；
console.log（'this.state'，pickerValue1，pickerValue2）
返回(
{货币.map（（货币，指数）=>(
))}
{货币.map（货币=>(
))}
);
}
}
导出默认货币现金屏幕；

---

希望这对你有帮助。根据您的要求进行更改。不要怀疑。

好吧，它几乎能起作用。现在我可以从选择器中选择一个项目。但当我选择了一些，我不能再选择其他的价值。此外，我想我将pase我所有的代码我认为我应该编辑文章，pase整个代码在这里，因为我认为还有其他什么东西给了问题。