Javascript 我在react native中获取了一个带有fetch的JSON,如何将结果发送到其他组件
我不知道如何将JSON作为参数发送到其他组件并呈现它。 我使用fetch从API获取JSON。 我该怎么做? 我使用了道具和状态,但一点用处都没有。 我使用了wait和async,但不工作。 我将数据存储到异步存储器中,但它不起作用。 我不太熟悉当地人。 提前谢谢 我的代码:Javascript 我在react native中获取了一个带有fetch的JSON,如何将结果发送到其他组件,javascript,android,json,react-native,fetch,Javascript,Android,Json,React Native,Fetch,我不知道如何将JSON作为参数发送到其他组件并呈现它。 我使用fetch从API获取JSON。 我该怎么做? 我使用了道具和状态,但一点用处都没有。 我使用了wait和async,但不工作。 我将数据存储到异步存储器中,但它不起作用。 我不太熟悉当地人。 提前谢谢 我的代码: import React, { Component } from 'react'; import { AsyncStorage, Platform, StyleSheet, Text, View } fro
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 >
);
}
}
以下方面应起作用: 组件/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
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} />;
}
}
你能分享一段代码片段以便我们提供具体建议吗?@CarlosC我在这种情况下使用redux添加了我的codesTry。你可以使用redux或任何其他语句管理库mobX、Ceralic等,但在他的代码片段中,他只是试图通过道具将数据传递给子组件。您不需要州管理库