javascript - 我在react-native中获取了带有fetch的JSON，如何将结果发送到其他组件

Question

我不知道如何将 JSON 作为参数发送到其他组件并渲染它。 我使用 fetch 从 API 获取 JSON。 我怎样才能做到这一点？ 我使用了 props 和 states 但它根本没有用。 我使用了await 和async 但我没有工作。 我将数据存储到 AsyncStorage 中，但它也不起作用。 我对react-native不太熟悉。 提前致谢

我的代码:

 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 >
    );
 }
}

Answer 1

以下应该有效:

组件/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} />;
  }
}