如何在JSON响应上生成dynaimc UI react

本文介绍了如何在JSON响应上生成dynaimc UI react-native的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

///在这里，我试图生成动态UI.通过API，我得到了JSON格式的响应，我必须在UI上绘制该响应.就像没有定义任何"TextInput"一样，它应该动态生成.下面是一些示例JSON响应.该响应可能会因不同的请求而改变.请帮助，我被困在下面只是一个代码，我不知道该怎么做.

// Here I am trying to generate Dynamic UI . Through API I am getting some response in JSON format , I have to draw that on UI . Like am not defining any "TextInput" it should generate dynamically.Below is some sample JSON response .That may change on different request . Please help , I am stuck below is just one code, I don't know how to do that .

import * as React from 'react'; import { Text, View, StyleSheet, Alert, Picker } from 'react-native'; import { Constants } from 'react-native'; import { TextInput } from 'react-native-gesture-handler'; var myloop = []; export default class UiDynamic extends React.Component { // add a selectValue to your state to stop the overwriting state = { PickerValueHolder: [], selectedValue: '' } componentDidMount() { // remove the return fetch('userapi/inventory/viewinventorytype', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ "username" :"admin", "password" :"admin" }) }).then((response) => response.json()) .then((responseJson) => { // use the inventoryTypeData as it is already an array let PickerValueHolder = responseJson.inventoryTypeData; for (let i = 0; i < PickerValueHolder.length; i++) { datavalue=() => { <Text>Hello ABhi</Text> console.log("Hello ABhi"); } } this.setState({ PickerValueHolder }); // Set the new state }) .catch((error) => { console.error(error); }); } GetPickerSelectedItemValue=()=>{ Alert.alert(this.state.PickerValueHolder); } render() { for (let i = 0; i < 10; i++) { datavalue=() => { <Text>Hello ABhi</Text> console.log("Hello ABhi"); } myloop.push( <View key={<TextInput></TextInput>}> <Text style={{ textAlign: 'center', marginTop: 5 }} >{<Text>Hello</Text>}</Text> </View> ); } return ( <View style={styles.container}> {this.datavalue.bind(this)} {myloop} </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ecf0f1', padding: 8, } });

//以下是示例JSON响应..假设这里获得了四个属性及其数据类型，因此在UI 4上应生成"TextInput".

// Below is Sample JSON Response .. Suppose here am getting four attributes and their datatype , So on UI 4 "TextInput" should generate .

{ "inventoryTypeData": [{ "data type": int, "Field 1": "" }, { "data type": string, "Field2": "" }, { "data type": int, "Field 3": "" }, { "datatype": int, "Field4": "" }], "success": "true" }

推荐答案

从"react-native"导入{TextInput};

将响应映射到状态后 this.setState({PickerValueHolder});

然后您可以使用map函数在渲染方法中循环浏览

You can then loop through it in your render method with the map function

return( <View style={styles.container}> {this.state.PickerValueHolder.map(data=>( <View> <TextInput placeholder={data.placeholder} keyboardType={data.datatype==="int" ? 'numeric': 'default'} onChangeText={(text) => this.setState({...this.state.value [data.name]: text })} value={this.state.value[data.name]} /> <Button onPress={this.handleButtonPress(data.name).bind(this)} /> <View/> /> ))} </View> ) }``` So here you are checking if the datatype is an int and then setting the keyboard type to numeric This is also setting all the changes to a value object in state. The Button calls a function with the name of of the value related to the text input