Javascript 接收到新数据时更新屏幕-React Native EXPO
我想知道当收到新数据时如何重新加载屏幕 问题是，我有一个“搜索”屏幕，用户可以在其中搜索不同的播放器，这些播放器启动API调用并将数据存储在异步存储中 当我的配置文件屏幕被加载时，我调用useEffect来检索这些数据，然后显示适当的信息。这在使用stack navigator时效果很好，但因为移动到选项卡导航（首选方式）配置文件屏幕仅在第一次显示时更新 因此，如果用户返回到“搜索”屏幕并搜索不同的数据，“配置文件”屏幕中不会有任何更改，直到用户重新启动应用程序 我正在使用Expo（不确定这是否有什么不同，但我对来自Swift和C#的javascript/react非常陌生） 我发现了两种可能性，比如componentWillMount，但这似乎与我设置屏幕的方式不符 下面是如何构建屏幕的示例代码（我已经看到了类的变化，这可能是componentDidMount无法工作的原因），因为放置整个屏幕会使它太混乱Javascript 接收到新数据时更新屏幕-React Native EXPO,javascript,react-native,expo,Javascript,React Native,Expo,我想知道当收到新数据时如何重新加载屏幕 问题是，我有一个“搜索”屏幕，用户可以在其中搜索不同的播放器，这些播放器启动API调用并将数据存储在异步存储中 当我的配置文件屏幕被加载时，我调用useEffect来检索这些数据，然后显示适当的信息。这在使用stack navigator时效果很好，但因为移动到选项卡导航（首选方式）配置文件屏幕仅在第一次显示时更新 因此，如果用户返回到“搜索”屏幕并搜索不同的数据，“配置文件”屏幕中不会有任何更改，直到用户重新启动应用程序 我正在使用Expo（不确定这是否
import React, {useState} from 'react';
import { View, Text, StyleSheet, Button, AsyncStorage } from 'react-native';
const Profile = () => {
return(
<View>
<Text>Profile<Text/>
</View>
)
}
export default Profile
import React，{useState}来自“React”；
从“react native”导入{视图、文本、样式表、按钮、异步存储}；
常量配置文件=（）=>{
返回(
轮廓
)
}
导出默认配置文件
import React, {useState, useEffect} from 'react';
import {View, Button, Text, Image, StyleSheet, TouchableOpacity, FlatList,AsyncStorage } from 'react-native';
import useLeague from '../hooks/useLeague';
import useMatchHistory from '../hooks/useMatchHistory';
import MatchItem from '../components/MatchItem';
import useMatchDetailArray from '../hooks/useMatchDetailArray';
import matchHistory from '../api/matchHistory';
import {SafeAreaView} from 'react-navigation';
const Profile = () => {
var id = ''
var puuid = ''
const [searchLeague, results, errorMessage] = useLeague()
const [searchMatchHistory, matchHistoryVar, errorMessageMatchHistory] = useMatchHistory()
const [searchArray,matchDetailArray] = useMatchDetailArray()
useEffect(() => {
AsyncStorage.getItem('puuid', (err, result) => {
//SET ID = SUMMONER ID
puuid = result
AsyncStorage.getItem('summonerID', (err, summonerIDResult) => {
console.log(`Data found: ` + summonerIDResult);
id = summonerIDResult
console.log('ID: ' + id + 'PUUID:' + puuid)
searchLeague(id);
searchMatchHistory(puuid);
});
});
}, []);
if(results[0]==null) {
return(
<View>
<Text>Waiting for data</Text>
</View>
)
} else {
//this renders only if profile data was loaded
const profile = results[0];
var path = require('../../assets/SILVER.png')
switch (profile.tier) {
case 'CHALLENGER':
path = require('../../assets/CHALLENGER.png')
break;
case 'GRANDMASTER':
path = require('../../assets/GRANDMASTER.png')
break;
case 'MASTER':
path = require('../../assets/MASTER.png')
break;
case 'DIAMOND':
path = require('../../assets/DIAMOND.png')
break;
case 'PLATINUM':
path = require('../../assets/PLATINUM.png')
break;
case 'GOLD':
path = require('../../assets/GOLD.png')
break;
case 'SILVER':
path = require('../../assets/SILVER.png')
break;
case 'IRON':
path = require('../../assets/IRON.png')
break;
default:
path = require('../../assets/BRONZE.png')
}
return(
<SafeAreaView style={{backgroundColor: 'white', flex: 1}}>
<View style= {styles.header}>
<Image style= {styles.tier} source={path}/>
<View style={styles.headerSubView}>
<Text style = {styles.lp}>{profile.leaguePoints} LP</Text>
<Text style = {styles.division}>Division {profile.rank}</Text>
</View>
</View>
<SafeAreaView style={styles.mainContainer}>
<Text style={styles.welcome}>Welcome, {profile.summonerName}!</Text>
<SafeAreaView style={styles.flatView}>
<TouchableOpacity
style={styles.matchHistory}
onPress={() => {
searchArray(matchHistoryVar)
}}
>
<Text style= {styles.leagueRanking}>{`Match History (${matchHistoryVar.length})`}</Text>
</TouchableOpacity>
<FlatList
style={styles.flatList}
data={matchDetailArray}
showsVerticalScrollIndicator={false}
keyExtractor= {(result) => Math.random().toString()}
renderItem={({item}) => {
return <MatchItem
match_id = {item.metadata.match_id}
units = {item.info.participants[0].units}
queue_id = {item.info.queue_id}
content_ID = {item.info.participants[0].companion.content_ID}
game_datetime = {item.info.game_datetime}
placement={item.info.participants[0].placement}
level={item.info.participants[0].level}
time_eliminated={item.info.participants[0].time_eliminated}
last_round= {item.info.participants[0].last_round}/>
}}/>
</SafeAreaView>
</SafeAreaView>
</SafeAreaView>
)
}
}
import React，{useState，useffect}来自“React”；
从“react native”导入{视图、按钮、文本、图像、样式表、TouchableOpacity、FlatList、AsyncStorage}；
从“../hooks/useague”导入useague；
从“../hooks/useMatchHistory”导入useMatchHistory；
从“../components/MatchItem”导入MatchItem；
从“../hooks/useMatchDetailArray”导入useMatchDetailArray；
从“../api/matchHistory”导入matchHistory；
从“react navigation”导入{SafeAreaView}；
常量配置文件=（）=>{
变量id=“”
var puuid=“”
const[searchLeague，results，errorMessage]=useLeague（）
const[searchMatchHistory，matchHistoryVar，errorMessageMatchHistory]=useMatchHistory（）
常量[searchArray，matchDetailArray]=useMatchDetailArray（）
useffect（（）=>{
AsyncStorage.getItem（'puuid'，（错误，结果）=>{
//集合ID=召唤者ID
puuid=结果
AsyncStorage.getItem（'CalluerId'，（错误，CalluerIdResult）=>{
log（`Data found:`+callereridresult）；
id=召唤结果
console.log（'ID:'+ID+'PUUID:'+PUUID）
搜索联盟（id）；
搜索匹配历史（puuid）；
});
});
}, []);
如果（结果[0]==null）{
返回(
等待数据
)
}否则{
//仅当加载了配置文件数据时才会呈现
常数剖面=结果[0]；
var path=require（“../../assets/SILVER.png”）
交换机（profile.tier）{
“挑战者”案：
path=require（“../../assets/CHALLENGER.png”）
打破
“特级大师”案例：
path=require（“../../assets/GRANDMASTER.png”）
打破
“船长”一案：
path=require（“../../assets/MASTER.png”）
打破
“钻石”案：
path=require（“../../assets/DIAMOND.png”）
打破
“白金”一案：
path=require（“../../assets/PLATINUM.png”）
打破
“黄金”一案：
path=require（“../../assets/GOLD.png”）
打破
“银”案：
path=require（“../../assets/SILVER.png”）
打破
案例“铁”：
path=require（“../../assets/IRON.png”）
打破
违约：
path=require（“../../assets/brown.png”）
}
返回(
{profile.leaguePoints}LP
分部{profile.rank}
欢迎，{profile.calleername}！
{
searchArray（matchHistoryVar）
}}
>
{`匹配历史（${matchHistoryVar.length}）`}
Math.random（）.toString（）}
renderItem={（{item}）=>{
返回
}}/>
)
}
}