react-native 通过映射填充选择器

Question

在我的 RN 项目中，我试图通过从数组状态映射来填充我的 Picker。我在映射过程中安慰了对象，似乎没有任何问题，它显示了正在映射的对象。我做错了什么？你能帮帮我吗？

<Item>
                        <Picker
                                iosHeader="Select one"
                                mode="dropdown"
                                onValueChange={this.onBranchChange.bind(this)}>
                                {this.state.branchAddresses.map((address,i) =>
                                     {
                                         console.log("myAddresses: ",address);
                                         return <Item style={{fontFamily: 'SourceSansPro-Regular'}} label={address.id} value={address.id} key={i}/>}
                                )}
                            </Picker>
                        </Item>

这里是 console.log() 的快照。它写入对象没有任何问题。

这是我收到的警告。

Answer 1

您应该使用 Picker 组件中的 Item 来完成这项工作。

有两种可能的方法。

const PickerItem = Picker.Item;

并且稍后使用此 <PickerItem> 组件。

或者直接使用组件

<Picker.Item style={{fontFamily: 'SourceSansPro-Regular'}} label={address.id} value={address.id} key={i}/>

Answer 2

你应该使用..！

import React, { useState, useEffect } from 'react';
import {

  StyleSheet,
  View
} from 'react-native';
import axios from 'axios'
import { Picker } from '@react-native-picker/picker';

export default function App() {

  const [state, setState] = useState([]);

  const fetchAPI = () => {
    const result = axios.post('http://www.example.com')
      .then(response => {
        const data = JSON.parse(JSON.stringify(response)).data.listaIncidencia;
        setState(data)
      })
      .catch(error => {
        console.error(error);
      });
    return result;
  };
  useEffect(() => {
    fetchAPI();
  }, []); 
  const [selectedValue, setSelectedValue] = useState("DEFAULD");

  console.log(selectedValue)
  return (
    <View>
      <Picker
        selectedValue={selectedValue}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}>{
          state.map((item, index) => {
            return <Picker.Item value={item.idMotivo} label={item.motivoDesc} key={index} />
          })
        }
      </Picker>
    </View>
  );
}

react-native 通过映射填充选择器

react-native fill the picker by mapping

picker

react-native