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

时间:2017-03-13 13:25:11

标签: react-native picker

在我的RN项目中,我正在尝试通过映射来填充我的System.getProperty("java.security.auth.login.config")状态,这是一个数组。我在映射期间安慰了对象,似乎没有任何问题,它显示了正在映射的对象。我做错了什么?你能帮帮我吗?

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> 的快照。它会毫无问题地写入对象。enter image description here

enter image description here

这是我得到的警告。 enter image description here enter image description here

2 个答案:

答案 0 :(得分:2)

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

有两种可行的方法。

const PickerItem = Picker.Item;

以后再使用此<PickerItem>组件。

或者您只是直接使用组件

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

答案 1 :(得分:0)

你应该使用..!

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