动态呈现本机不工作的内容。

Question

我正在尝试动态地呈现内容。我有一个JSON数据数组，我循环处理，现在(测试目的)为该数组的每个元素创建一个文本节点“嘿嘿”，将其推到另一个名为renderedData的数组中。我正在尝试呈现这个数组的内容，renderedData，但是它不起作用。我不知道为什么-没有呈现，但当我尝试一个虚拟数组，在现场声明，如“测试”，它工作。

import * as React from 'react';
import { StyleSheet, Button, TextInput, Modal, Alert, TouchableHighlight, SafeAreaView, SectionList, FlatList, ListView } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AsyncStorage from '@react-native-community/async-storage';
import { useState } from 'react';
import { parse } from '@babel/core';
import { getInitialURL } from 'expo-linking';

const payments: any[] = []

export default function PaymentsScreen(){
    
    const getData = async () => {

        try {
            
            const keys = await AsyncStorage.getAllKeys();
            const result = await AsyncStorage.multiGet(keys)
            return result

        } catch(e) {
        
            console.log(e)
        }

    }

    
    
    React.useEffect(() => {

        getData()

    })

    const data: (string | null)[] = []
    const renderedData: string[] = []

    async function parseData(){

        const payments = await getData()

        if (payments != null && payments != undefined) {
            
            console.log(payments)

            payments.map((eachPayment: any[]) => {
                
                if (eachPayment[1] != null && eachPayment[1].includes("{")) 
                    data.push(eachPayment[1])

            })

        }
        
        data.map((eachPayment: any) => {

            if (eachPayment != null) renderedData.push("hey")
        })

        return data
        
    }

    parseData()

    return (
         
        <View>
            {data.map((info: any) => <Text>{info}</Text>)}
        </View>
        
    )

}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginHorizontal: 16
    },
    item: {
      backgroundColor: "#f9c2ff",
      padding: 20,
      marginVertical: 8
    },
    header: {
      fontSize: 32,
      backgroundColor: "#fff"
    },
    title: {
      fontSize: 24
    }
  });

​

​

Answer 1

既然您有异步调用，下面是我要做的事情：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const fakeApiData = [1, 2, 3];
  const [data, setData] = React.useState([]);
  const [renderedData, setRenderedData] = React.useState([]);


  const getApiDataAsync = () => Promise.resolve(fakeApiData);

// Equal to componentDiMount()
  React.useEffect(() => {
    // This is your async call to get your data
    const data = getApiDataAsync().then(data => setData(data));
  }, []);

  // Effect triggered after data changes, so when you get your data
  React.useEffect(() => {
    const futurRenderedData = [];
    data.map(item => futurRenderedData.push(item));
    setRenderedData(futurRenderedData);
  }, [data]);

  return (
    <div>
      {renderedData.map(item => <span>{item} </span>)}
    </div>
  );
};

render(<App />, document.getElementById("root"));

其想法是获取您的数据，确保通过承诺、等待或可观察的方式获得数据，然后设置您的renderedData。

下面是您修改的代码，如果仍然有问题，请告诉我：

export default function PaymentsScreen() {
  const [data, setData] = React.useState(new Array<string>());
  const [renderedData, setRenderedData] = React.useState(new Array<string>());

  const getData = async () => {
    try {
      const keys = await AsyncStorage.getAllKeys();
      const result = await AsyncStorage.multiGet(keys);
      return result;
    } catch (e) {
      console.log(e);
    }
  };

  async function parseData() {
    const payments = await getData();

    if (payments) {
      payments.foreach((eachPayment: any[]) => {
        if (eachPayment[1] && eachPayment[1].includes('{'))
          data.push(eachPayment[1]);
      });
    }

    data.map((eachPayment: any) => {
      if (eachPayment != null) setRenderedData('hey');
    });

    return data;
  }


  React.useEffect(async () => {
    setData(await parseData());
  }, []);

  return (
    <View>
      <View>
        {data.map((info: any) => (
          <Text>{info}</Text>
          ))}
      </View>
      <View>
        {renderedData.map(item => <span>{item} </span>)} {/*If this appear in the html then it works*/}
      </View>
    </View>
  );
}