我在将数据添加到 picker.item 时遇到问题,其中数据采用单个数组的形式。
我尝试过使用 map 并推送数组,但似乎没有任何效果。
我的数组如下
[ "ABC", "XYZ", "123", "aaa"]
class XYZ extends Component {
constructor(props) {
super(props);
this.state = { statelist: '' };
list() {
fetch('myURL', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then((response) => {
return response.json();
})
.then((data) => {
data.map((item,key)=>{
console.log(item,key,'item and key')
return(
<Item label={item} value={item} />)
})
}
async onStateChange(value) {
await this.setState({
statelist: value
});}
render() {
return (
<View >
<Picker
selectedValue={this.state.abc}
onValueChange={this.onStateChange.bind(this)}>
this.list()}
</Picker>
</View>
);
};
}
export default withNavigation(XYZ);
我想要一个由 5 个选项组成的下拉列表,如上所示,它们应该是数组的所有 5 个元素。
最佳答案
您没有从调用中返回数据,并且您还在处理异步调用。您应该在每次渲染时获取数据,或者在 componentDidMount()
中获取一次数据,然后设置状态。
const DATA = [1, 2, 3, 4, 5, 6]
class Select extends React.Component {
constructor() {
super()
this.state = {}
}
getList() {
return Promise.resolve(DATA).then(data => data.map(item => <option label={item} value={item} />))
}
componentDidMount() {
this.getList().then(data => this.setState({ list: data }))
}
render() {
return (
<select onChange={this.onStateChange}>
{this.state.list || null}
</select>
)
}
}
ReactDOM.render(
<Select />,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关于javascript - 如何将项目分配给选择器以获取数据列表作为数组形式的响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57604947/