[英]I get a JSON with fetch in react-native how can i send the results to other components
I don't how to send my JSON as a param and to other components and rendering it. 我没有如何将JSON作为参数发送给其他组件并进行渲染。 I using fetch for getting my JSON from a API. 我使用fetch从API获取JSON。 How can i do this? 我怎样才能做到这一点? I used props and states but it wasn't useful at all. 我使用道具和状态,但是根本没有用。 I used await and async but i doesn't worked. 我用了等待和异步,但我没有工作。 I store data into a AsyncStorage but it doesnt worked too. 我将数据存储到AsyncStorage中,但也无法正常工作。 I'm not som familar to the react-native. 我不熟悉本机。 Thanks in advance 提前致谢
my codes: 我的代码:
import React, {
Component
} from 'react';
import {
AsyncStorage,
Platform,
StyleSheet,
Text,
View
} from 'react-native';
let Storage_Key = "@Apps:key"
class RenderLayout extends Component {
constructor(props) {
super(props);
this.state = {
layoutData: 'test'
};
}
componentDidMount() {
this._loadInitState().done();
}
componentWillReceiveProps(nextProps) {
console.log(nextProps, "nextProps");
if (nextProps.layoutData !== this.state.layoutData) {
this.setState({
layoutData: nextProps.layoutData
});
}
}
async _loadInitState() {
console.log("here _loadInitState");
try {
console.log("here _loadInitState 2",
AsyncStorage.getItem(Storage_Key));
let data = await AsyncStorage.getItem(Storage_Key);
console.log(data, "data");
if (data != null) {
this.setState({
layoutData: data
});
console.log(data);
}
} catch (err) {
console.log(err, "err");
}
}
render() {
console.log("render RenderLayout", );
return ( <
View style = {
styles.container
} >
<
Text style = {
styles.welcome
} > {
this.props.name
} {
this.props.layoutData
} <
/Text> < /
View >
);
}
}
export default class App extends Component < {} > {
constructor(props) {
super(props);
this.state = {
layoutData: null
};
}
async _dataBind(data) {
console.log("_dataBind", data);
this.setState({
layoutData: data
});
try {
console.log("AsyncStorage.setItem");
await AsyncStorage.setItem(Storage_Key, data);
} catch (err) {
console.log(err, "err");
}
}
componentDidMount() {
console.log("componentWillMount");
var api = 'https://api.ptcvdep.net/v1/lava/advertisement/home';
fetch(api, {
method: 'GET',
headers: {
'Content-Type': 'application/json; charset=utf-8',
Authorization: 'bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJvbWlkc2Fiel9tbmciLCJqdGkiOiJjOWVmMTY5OC0zOWViLTQ5YWItODBjNC03ZDA3NGY1OTc2M2IiLCJpYXQiOjE1MTQ0OTY2OTYsInJvbGVzIjpbIkFwaUFkbWluIiwiTGF2YU1hbmFnZXIiLCJUb2JpbkFwcCJdLCJ1aXUiOiI3IiwidWljIjoiNyIsImN1aXUiOiIxOTg3NyIsInVpY3AiOiIxOTg3NyIsInVpY24iOiLYp9mF2YrYryDYs9io2LIiLCJscGxpZCI6IjQiLCJuYmYiOjE1MTQ0OTY2OTcsImV4cCI6MTUxNzA4ODY5NywiaXNzIjoiU3VwZXJBd2Vzb21lVG9rZW5TZXJ2ZXIiLCJhdWQiOiJodHRwOi8vMC4wLjAuMDo4MDg2LyJ9.jdndeA58ADWz0vDYujkJ4YRfMfHxbgQFwaOIF6Gw-4c',
DeviceVersion: 10
},
}).then(function(response, responseText) {
console.log(response, JSON.parse(response._bodyText), JSON.parse(response._bodyText).data);
this.setState({
layoutData: data
});
this._dataBind(JSON.parse(response._bodyText).data);
});
}
render() {
console.log("render");
let data = this.state.layoutData;
return ( <
View >
<
Text > {
data
} <
/Text> <
RenderLayout layoutData = {
data
}
/> < /
View >
);
}
}
The following should work: 以下应该工作:
components/RenderLayout.js 组件/ RenderLayout.js
import React, { Component } from "react";
import { FlatList, Text, ActivityIndicator } from "react-native";
export default class RenderLayout extends Component {
render() {
if (!this.props.layoutData) {
return <ActivityIndicator />;
}
return (
<FlatList
data={this.props.layoutData.data}
keyExtractor={this.keyExtractor}
renderItem={this.renderDate}
/>
);
}
keyExtractor = (item, index) => item.position;
renderDate = ({ item }) => {
return (
<Text
style={{
textAlign: "center",
fontSize: 20
}}
>
{item.title}
</Text>
);
};
}
App.js App.js
import React, { Component } from "react";
import RenderLayout from "./components/RenderLayout";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
layoutData: null
};
}
componentDidMount() {
fetch("https://api.ptcvdep.net/v1/lava/advertisement/home", {
method: "GET",
headers: {
"Content-Type": "application/json; charset=utf-8",
Authorization:
"bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJvbWlkc2Fiel9tbmciLCJqdGkiOiJjOWVmMTY5OC0zOWViLTQ5YWItODBjNC03ZDA3NGY1OTc2M2IiLCJpYXQiOjE1MTQ0OTY2OTYsInJvbGVzIjpbIkFwaUFkbWluIiwiTGF2YU1hbmFnZXIiLCJUb2JpbkFwcCJdLCJ1aXUiOiI3IiwidWljIjoiNyIsImN1aXUiOiIxOTg3NyIsInVpY3AiOiIxOTg3NyIsInVpY24iOiLYp9mF2YrYryDYs9io2LIiLCJscGxpZCI6IjQiLCJuYmYiOjE1MTQ0OTY2OTcsImV4cCI6MTUxNzA4ODY5NywiaXNzIjoiU3VwZXJBd2Vzb21lVG9rZW5TZXJ2ZXIiLCJhdWQiOiJodHRwOi8vMC4wLjAuMDo4MDg2LyJ9.jdndeA58ADWz0vDYujkJ4YRfMfHxbgQFwaOIF6Gw-4c",
DeviceVersion: 10
}
})
.then(response => response.json())
.then(responseJson => {
this.setState({
layoutData: responseJson
});
});
}
render() {
return <RenderLayout layoutData={this.state.layoutData} />;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.