shoutem获取数据不显示 [英] Shoutem fetch data not displaying
问题描述
首先，我首先要说我是React Native和Shoutem的一员.我不确定是否应该在问题中写Shoutem或React Native，但这是我的问题.
First I want to start by saying I am a total noob at React Native and Shoutem. I am not sure if I should write Shoutem or React Native in the subject of my questions, but here is my problem.
我有两个屏幕:
- Screen1.js
- Screen2.js
Screen1显示从访存返回的项目的列表.单击该项目后，它将打开第二个屏幕，即详细信息屏幕.
Screen1 displays a list of items returned from a fetch. Once I click on the item, it will open the second screen which is the details screen.
我正在将数据从screen1传递到screen2.在screen2中，我需要对不同的数据进行另一个访存调用，但这是行不通的.我在两个屏幕上都做完全相同的事情.
I am passing data from screen1 to screen2. In screen2 I need to make another fetch call for different data, but it does not work. I am doing exactly the same thing on both screens.
这是我的Screen1代码:
Here is my code for Screen1:
import React, {
Component
} from 'react';
import {
ActivityIndicator,
TouchableOpacity
} from 'react-native';
import {
View,
ListView,
Text,
Image,
Tile,
Title,
Subtitle,
Overlay,
Screen
} from '@shoutem/ui';
import {
NavigationBar
} from '@shoutem/ui/navigation';
import {
navigateTo
} from '@shoutem/core/navigation';
import {
ext
} from '../extension';
import {
connect
} from 'react-redux';
export class List extends Component {
constructor(props) {
super(props);
this.renderRow = this.renderRow.bind(this);
this.state = {
isLoading: true,
content: null,
}
}
componentDidMount() {
return fetch('https://www.cannabisreports.com/api/v1.0/strains').then((response) => response.json()).then((responseData) => {
this.setState({
isLoading: false,
content: responseData
});
}).done();
}
renderRow(rowData) {
const { navigateTo } = this.props;
return (
//<Text>{rowData.name}, {rowData.createdAt.datetime}</Text>
<TouchableOpacity onPress={() => navigateTo({
screen: ext('Strain'),
props: { rowData }
})}>
<Image styleName="large-banner" source={{ uri: rowData.image &&
rowData.image ? rowData.image : undefined }}>
<Tile>
<Title>{rowData.name}</Title>
<Subtitle>none</Subtitle>
</Tile>
</Image>
</TouchableOpacity>
);
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{flex: 1, paddingTop: 20}}>
<ListView
data={this.state.content.data}
renderRow={rowData => this.renderRow(rowData)}
/>
</View>
);
}
}
// connect screen to redux store
export default connect(
undefined,
{ navigateTo }
)(List);
我正在将rowData传递给Screen2.然后，我需要使用rowData中的数据进行另一个访存调用，因为它是Screen2中API调用所需的路径参数.
I am passing rowData to Screen2. I then need to make another fetch calling using data from rowData as it is a path parameter needed for the API call in Screen2.
因此基本上，我需要像这样在Screen2中进行提取调用:
So basically I need to make a fetch call in Screen2 like this:
fetch('https://mywebsite.com/'+rowData.something+'/myotherdata')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
content: responseJson.data
})
})
.catch((error) => {
console.error(error);
});
这是我的screen2代码:
Here is my code for screen2:
export default class Strain extends Component {
constructor(props) {
super(props);
this.state = {
content: null,
}
}
componentDidMount() {
return fetch('https://mywebsite.com/'+rowData.something+'/myotherdata')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
content: responseJson.data
})
})
.catch((error) => {
console.error(error);
});
}
renderRow(dataContent) {
return (
<Text>{dataContent.name}</Text>
// This does not work either -> <Text>{dataContent}</Text>
);
}
render() {
const { rowData } = this.props; //This is coming from screen1.js
return (
<ScrollView style = {{marginTop:-70}}>
<Image styleName="large-portrait" source={{ uri: rowData.image &&
rowData.image ? rowData.image : undefined }}>
<Tile>
<Title>{rowData.name}</Title>
<Subtitle>{rowData.createdAt.datetime}</Subtitle>
</Tile>
</Image>
<Row>
<Text>Seed Company: {rowData.seedCompany.name}</Text>
</Row>
<Divider styleName="line" />
<Row>
<Icon name="laptop" />
<View styleName="vertical">
<Subtitle>Visit webpage</Subtitle>
<Text>{rowData.url}</Text>
</View>
<Icon name="right-arrow" />
</Row>
<Divider styleName="line" />
<View style={{flex: 1, paddingTop: 20}}>
<ListView
data={content}
renderRow={dataContent => this.renderRow(dataContent)}
/>
</View>
<Divider styleName="line" />
</ScrollView>
);
}
}
我的提取网址返回的数据如下:
My fetch URL returns data like this:
{
data: {
name: "7.5833",
another_name: "8.6000",
different_name: "5.7500",
}
}
这只会返回一个数据对象，如您在上面看到的那样.
This only returns one data object like what you see above.
运行代码时出现此错误:
null is not an object (evaluating 'Object.keys(e[t])')
When I run the code I get this error:
null is not an object (evaluating 'Object.keys(e[t])')
如果您需要我提供更多信息，请告诉我.
Please let me know if you need me to provide more info.
我尝试了很多不同的方法，但似乎没有任何效果，因此我需要一些帮助.我在做什么错了?
I have tried so many different things and nothing seems to work so I am in need of some help. What am I doing wrong?
推荐答案
不确定为什么可以，但是可以.
Not sure why this works but it does.
我使用了一个函数来fetch我的数据，然后像这样在componentDidMount中调用该函数:
I used a function to fetch my data and then call the function in componentDidMount like this:
getData() {
return fetch('https://mywebsite.com/myotherdata')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
data: responseJson.data
});
})
.catch((error) => {
console.error(error);
});
}
componentDidMount() {
this.getData();
}
然后从JSON响应中获取值，我正在这样做:
this.state.data.name
Then to get the values from the JSON response I am doing this:
this.state.data.name
我有另一个问题，但是我将创建另一个问题.
I am having another issue, but I will create another question.
这篇关于shoutem获取数据不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
