Javascript 中的JSON数据未出现在react native中的FlstList中
我知道如何在FlatList上填充jSON数据，我已经这样做了，但现在，我在这里填充按钮和表数据之间的数据，在componentDidMount中，我调用这两个函数，首先是表创建，然后是jSON调用，我从另一个屏幕的QRCode扫描中获取表数据，并在这里获取Javascript 中的JSON数据未出现在react native中的FlstList中,javascript,reactjs,react-native,react-redux,Javascript,Reactjs,React Native,React Redux,我知道如何在FlatList上填充jSON数据，我已经这样做了，但现在，我在这里填充按钮和表数据之间的数据，在componentDidMount中，我调用这两个函数，首先是表创建，然后是jSON调用，我从另一个屏幕的QRCode扫描中获取表数据，并在这里获取 import React, { Component } from 'react'; import { StyleSheet, View, ActivityIndicator, ScrollView } from 'react-native'
import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator, ScrollView } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
import {Button, Text, DatePicker, Item, Picker, Input,
Textarea,FlatList} from 'native-base';
export default class OpenApplianceIssue extends Component {
constructor(props) {
super(props);
this.state = {
// tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
tableData: [], qrData: '', loading: false, selectedPriority: '',
selectedIssue: '', selectedReason: '', selectedTriedRestart: '',
selectedPowerLED: '', selectedBurning: '', selectedNoise: '',
AbcSdata : null, loading : true,
}
this.setDate = this.setDate.bind(this);
}
setDate(newDate) {
}
_loadInitialState = async () => {
const { navigation } = this.props;
const qdata = navigation.getParam('data', 'NA').split(',');
var len = qdata.length;
const tData = [];
console.log(len);
for(let i=0; i<len; i++)
{
var data = qdata[i].split(':');
const entry = []
entry.push(`${data[0]}`);
entry.push(`${data[1]}`);
tData.push(entry);
}
this.setState({tableData: tData } );
console.log(this.state.tableData);
this.setState({loading: true});
}
componentDidMount() {
this._loadInitialState().done();
// this.createViewGroup();
}
// componentDidMount() {
// this.createViewGroup();
// }
createViewGroup = async () => {
try {
const response = await fetch(
'http://Dsenze/userapi/sensor/viewsensor',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"password": 'admin',
"username": 'admin',
"startlimit":"0",
"valuelimit":"10",
}),
}
);
const responseJson = await response.json();
const { sensorData } = responseJson;
this.setState({
AbcSdata: sensorData,
loading: false,
});
} catch (e) {
console.error(e);
}
};
updateSearch = search => {
this.setState({ search });
};
keyExtractor = ({ id }) => id.toString();
keyExtractor = ({ inventory }) => inventory.toString();
renderItem = ({ item }) => (
<TouchableOpacity
style={styles.item}
activeOpacity={0.4}
onPress={() => {
this.clickedItemText(item);
}}>
<Text style={styles.buttonText}>Id {item.inventory}</Text>
<Text>Inv {item.inventory}</Text>
<Text>Sensor {item.inventory}</Text>
</TouchableOpacity>
);
onClickListener = (viewId) => {
if(viewId == 'tag')
{
this.props.navigation.navigate('AddSensors');
}}
render() {
const state = this.state;
const AbcSdata = this.state;
if(this.state.loading == false) {
return ( <ActivityIndicator size='large' style={{height:80}} /> )
}
else {
return (
<ScrollView style={styles.container}>
<Button full rounded light style={{backgroundColor: 'blue', justifyContent: 'center', alignItems: 'center'}}
onPress={() => this.onClickListener('tag')}>
<Text style={{color: 'white'}}>Add Sensors</Text>
</Button>
<View style={styles.container1}>
{this.state.loading ? (
<ActivityIndicator size="large" />
) :
(
<FlatList
AbcSdata={AbcSdata}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
)}
</View>
<View>
<Text
style={{alignSelf: 'center', fontWeight: 'bold', color: 'black'}} >
Inventory Details
</Text>
<Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff', padding:10,paddingBottom: 10}}>
<Rows data={state.tableData} textStyle={styles.text}/>
</Table>
</View>
</ScrollView>
)
}
}
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { margin: 6 }
});
import React，{Component}来自'React'；
从“react native”导入{StyleSheet，View，ActivityIndicator，ScrollView}；
从“react native Table component”导入{Table，Row，Rows}；
导入{按钮，文本，日期选择器，项，选择器，输入，
Textarea，FlatList}来自“本机基”；
导出默认类OpenApplianceSue扩展组件{
建造师（道具）{
超级（道具）；
此.state={
//桌面：['Head'，'Head2'，'Head3'，'Head4']，
tableData:[]，qrData:“”，加载：false，selectedPriority:“”，
选择问题：“”，选择原因：“”，选择问题开始：“”，
selectedPowerLED:“”，selectedBurning:“”，selectedNoise:“”，
AbcSdata:null，加载：true，
}
this.setDate=this.setDate.bind（this）；
}
设置日期（newDate）{
}
_loadInitialState=async（）=>{
const{navigation}=this.props；
const qdata=navigation.getParam（'data'，'NA'）.split（'，'）；
var len=qdata.length；
常数tData=[]；
控制台日志（len）；
for（设i=0；i{
试一试{
const response=等待获取(
'http://Dsenze/userapi/sensor/viewsensor',
{
方法：“POST”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
“密码”：“管理员”，
“用户名”：“管理员”，
“startlimit”：“0”，
“valuelimit”：“10”，
}),
}
);
const responseJson=wait response.json（）；
const{sensorData}=responseJson；
这是我的国家({
AbcSdata：传感器数据，
加载：false，
});
}捕获（e）{
控制台错误（e）；
}
};
updateSearch=搜索=>{
this.setState（{search}）；
};
keyExtractor=（{id}）=>id.toString（）；
keyExtractor=（{inventory}）=>inventory.toString（）；
renderItem=（{item}）=>(
{
点击编辑文本（项目）；
}}>
Id{item.inventory}
存货{item.inventory}
传感器{item.inventory}
);
onClickListener=（视图ID）=>{
如果（viewId=='tag'）
{
this.props.navigation.navigate（'AddSensors'）；
}}
render（）{
const state=this.state；
const AbcSdata=此.state；
if（this.state.load==false）{
return（在平面列表组件中，您正在设置AbcSdata={AbcSdata}
，而您应该设置数据属性：
<FlatList
data={AbcSdata}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
这可能是因为_componentDidMount中的loadInitialState是一个异步调用，表最初呈现时没有数据。您可以尝试传入一些道具，以便在获得数据后刷新。此外，在您放在此处的代码中，对createViewGroup（）的所有调用注释掉了，但定义仍然存在。这不是一个大问题，但对于查看您的代码的人来说仍然非常混乱。请尝试此代码
import React, { Component } from 'react';
import { View, Text, TextInput,
FooterTab,Button,TouchableOpacity, ScrollView, StyleSheet,
ActivityIndicator ,Header,FlatList} from 'react-native';
import {Icon} from 'native-base';
import { Table, Row, Rows } from 'react-native-table-component';
import { createStackNavigator } from 'react-navigation';
import { SearchBar } from 'react-native-elements';
export default class OpenApplianceIssue extends Component {
constructor() {
super();
this.state = {
AbcSdata: null,
loading: true,
search: '',
tableData: [], qrData: '', selectedPriority: '',
selectedIssue: '', selectedReason: '', selectedTriedRestart: '',
selectedPowerLED: '', selectedBurning: '', selectedNoise: '',
};
this.setDate = this.setDate.bind(this);
}
setDate(newDate) {
}
_loadInitialState = async () => {
const { navigation } = this.props;
const qdata = navigation.getParam('data', 'NA').split(',');
var len = qdata.length;
const tData = [];
console.log(len);
for(let i=0; i<len; i++)
{
var data = qdata[i].split(':');
const entry = []
entry.push(`${data[0]}`);
entry.push(`${data[1]}`);
tData.push(entry);
}
this.setState({tableData: tData } );
console.log(this.state.tableData);
this.setState({loading: true});
}
componentDidMount() {
this._loadInitialState().done();
this.createViewGroup();
}
createViewGroup = async () => {
try {
const response = await fetch(
'http:Dsenze/userapi/sensor/viewsensor',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"password": 'admin',
"username": 'admin',
"startlimit":"0",
"valuelimit":"10",
}),
}
);
const responseJson = await response.json();
const { sensorData } = responseJson;
this.setState({
AbcSdata: sensorData,
loading: false,
});
} catch (e) {
console.error(e);
}
};
updateSearch = search => {
this.setState({ search });
};
keyExtractor = ({ id }) => id.toString();
keyExtractor = ({ inventory }) => inventory.toString();
renderItem = ({ item }) => (
<TouchableOpacity
style={styles.item}
activeOpacity={0.4}
onPress={() => {
this.clickedItemText(item);
}}>
<Text style={styles.buttonText}>Id {item.id}</Text>
<Text>Hospital Name {item.inventory}</Text>
<Text>User {item.inventory}</Text>
<Text>Date {item.inventory}</Text>
</TouchableOpacity>
);
onClickListener = (viewId) => {
if(viewId == 'tag')
{
this.props.navigation.navigate('AddSensors');
}}
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "86%",
backgroundColor: "#CED0CE",
}}
/>
);
};
render() {
const { loading, AbcSdata } = this.state;
const state = this.state;
return (
<ScrollView>
<View style={styles.container1}>
<TouchableOpacity full rounded light style={{backgroundColor: 'blue', justifyContent: 'center', alignItems: 'center'}}
onPress={() => this.onClickListener('tag')}>
<Text style={{color: 'white'}}>Add Sensors</Text>
</TouchableOpacity>
</View>
<View style={styles.container1}>
{this.state.loading ? (
<ActivityIndicator size="large" />
) :
(
<FlatList
data={AbcSdata}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
ItemSeparatorComponent={this.renderSeparator}
/>
)}
</View>
<View>
<Text
style={{alignSelf: 'center', fontWeight: 'bold', color: 'black'}} >
Inventory Details
</Text>
<Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff', padding:10,paddingBottom: 10}}>
<Rows data={state.tableData} textStyle={styles.text}/>
</Table>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create(
{
container1:
{
flex: 1,
alignItems: 'stretch',
fontFamily: "vincHand",
color: 'blue'
},
header_footer_style:{
width: '100%',
height: 44,
backgroundColor: '#4169E1',
alignItems: 'center',
justifyContent: 'center',
color:'#ffffff',
},
Progressbar:{
justifyContent: 'center',
alignItems: 'center',
color: 'blue',
},
ListContainer :{
borderColor: '#48BBEC',
backgroundColor: '#000000',
color:'red',
alignSelf: 'stretch' ,
},
container2:
{
flex: 1,
justifyContent: 'center',
alignItems: 'stretch',
paddingHorizontal: 15
},
inputBox:{
width:300,
borderColor: '#48BBEC',
backgroundColor: '#F8F8FF',
borderRadius:25,
paddingHorizontal:16,
fontSize:16,
color:'#000000',
marginVertical:10,
},
button:{
width:300,
backgroundColor:'#4169E1',
borderRadius:25,
marginVertical:10,
paddingVertical:16
},
buttonText:{
fontSize:16,
fontWeight:'500',
color:'#ffffff',
textAlign:'center'
},
textStyle:{
fontSize:16,
fontWeight:'500',
color:'#ffffff',
textAlign:'center'
},
item:
{
padding: 15
},
text:
{
fontSize: 18
},
button:{
width:300,
backgroundColor:'#4169E1',
borderRadius:25,
marginVertical:10,
paddingVertical:16
},
buttonText:{
fontSize:16,
fontWeight:'500',
color:'red',
textAlign:'center'
},
separator:
{
height: 2,
backgroundColor: 'rgba(0,0,0,0.5)'
},
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { margin: 6 }
});
import React，{Component}来自'React'；
导入{视图，文本，文本输入，
FooterTab、按钮、TouchableOpacity、ScrollView、样式表、，
ActivityIndicator，Header，FlatList}来自“react native”；
从“本机基”导入{Icon}；
从“react native Table component”导入{Table，Row，Rows}；
从“反应导航”导入{createStackNavigator}；
从“react native elements”导入{SearchBar}；
导出默认类OpenApplianceSue扩展组件{
构造函数（）{
超级（）；
此.state={
AbcSdata:null，
加载：对，
搜索：“”，
tableData:[]，qrData:“”，selectedPriority:“”，
选择问题：“”，选择原因：“”，选择问题开始：“”，
selectedPowerLED:“”，selectedBurning:“”，selectedNoise:“”，
};
this.setDate=this.setDate.bind（this）；
}
设置日期（newDate）{
}
_loadInitialState=async（）=>{
const{navigation}=this.props；
const qdata=navigation.getParam（'data'，'NA'）.split（'，'）；
var len=qdata.length；
常数tData=[]；
控制台日志（len）；
for（设i=0；i{
试一试{
const response=等待获取(
'http:Dsenze/userapi/sensor/viewserver'，
{
方法：“POST”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
“密码”：“管理员”，
“用户名”：“管理员”，
“startlimit”：“0”，
“valuelimit”：“10”，
}),
}
);
const responseJson=wait response.json（）；
const{sensorData}=responseJson；
这是我的国家({
AbcSdata：传感器数据，
加载：false，
});
}捕获（e）{
控制台错误（e）；
}
};
updateSearch=搜索=>{
this.setState（{search}）；
};
keyExtractor=（{id}）=>id.toString（）；
keyExtractor=（{inventory}）=>inventory.toString（）；
renderItem=（{item}）=>(
{
点击编辑文本（项目）；
}}>
Id{item.Id}
医院名称{item.inventory}
用户{item.inventory}
日期{item.inventory}
);
onClickListener=（视图ID）=>{
如果（viewId=='tag'）
{
this.props.navigation.navigate（'AddSensors'）；
}}
RenderParator=（）=>{
返回(
);
};
render（）{
常量{loading，AbcSdata}=this.state；
const state=this.state；
返回(
this.onClickListener（'tag'）}>
添加传感器
{this.state.loading(
) :
(
)}
存货明细