react-native 通过映射填充选择器
react-native fill the picker by mapping
在我的 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()
的快照。它写入对象没有任何问题。
这是我收到的警告。
您应该使用 Picker
组件中的 Item
来完成这项工作。
有两种可能的方法。
const PickerItem = Picker.Item;
并且稍后使用此 <PickerItem>
组件。
或者直接使用组件
<Picker.Item style={{fontFamily: 'SourceSansPro-Regular'}} label={address.id} value={address.id} key={i}/>
你应该使用..!
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>
);
}
在我的 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()
的快照。它写入对象没有任何问题。
这是我收到的警告。
您应该使用 Picker
组件中的 Item
来完成这项工作。
有两种可能的方法。
const PickerItem = Picker.Item;
并且稍后使用此 <PickerItem>
组件。
或者直接使用组件
<Picker.Item style={{fontFamily: 'SourceSansPro-Regular'}} label={address.id} value={address.id} key={i}/>
你应该使用..!
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>
);
}