react-native - react-native 功能组件重新渲染
问题描述
我是 react-native 的初学者。据我所知,组件在这种情况下会重新渲染。
- 道具变了
- 状态改变
- 父组件已更新。
当我再次回到主页时,AccountPlaylist 页面被重新渲染。但我不知道为什么。
我认为, getPlaylists() 导致重新渲染。因为
const listener =navigation.addListener('didFocus', ()=>{
getPlaylists();
});
但是,它是 PlaylistContext 函数(getPlaylists)。所以,我认为它会影响 playlistContext 状态。但是,AccountPlaylist 页面仅适用于从与 playlistContext 状态无关的其他组件传递的道具播放列表。为什么要重新渲染 AccountPlaylist?请帮助我T^T。
主页
import React, { useEffect, useContext } from 'react';
import { Text, Image, StyleSheet, View, TouchableOpacity, SafeAreaView, FlatList } from 'react-native';
import {Context as PlaylistContext} from '../context/PlaylistContext';
import {Context as UserContext} from '../context/UserContext';
import {Context as BoardContext} from '../context/BoardContext';
import {Context as NoticeContext} from '../context/NoticeContext';
import { navigate } from '../navigationRef';
const Imagetake = ({url}) => {
url =url.replace('{w}', '100');
url = url.replace('{h}', '100');
return <Image style ={{height:'100%', width:'100%'}} source ={{url:url}}/>
};
const MainPage = ({navigation}) => {
const { state, getPlaylists, getPlaylist } = useContext(PlaylistContext);
const { initUser, getMyInfo, getMyPlaylist, getMyCurating, getMyScrab } = useContext(UserContext);
const { getPopularBoard } = useContext(BoardContext);
const { getnotice, setnoticetoken } = useContext(NoticeContext);
console.log('Main Page');
useEffect(()=>{
setnoticetoken();
getPlaylists();
getPopularBoard()
initUser();
getMyInfo();
getMyPlaylist();
getMyCurating();
getMyScrab();
getnotice();
const listener =navigation.addListener('didFocus', ()=>{
getPlaylists();
});
return () => {
listener.remove();
};
}, []);
return (
<SafeAreaView style={styles.safeArea}>
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress = {()=>navigate('Create')}>
<Text>글작성</Text>
</TouchableOpacity>
</View>
<View style={styles.posts}>
<FlatList
data ={state.playlists}
keyExtractor = {playlists => playlists._id}
renderItem = {({item}) => {
return (
<TouchableOpacity onPress={() => { navigate('SelectedPlaylist', {id: item._id , object:item}); getPlaylist({id:item._id, postUserId:item.postUserId}) ; }}>
<View style={styles.post}>
<View style ={styles.postcontent}>
{item.image == undefined ?
<Imagetake url={item.songs[0].attributes.artwork.url}></Imagetake> :
<Imagetake url={item.image}></Imagetake>}
</View>
<View style={styles.posthead}>
<TouchableOpacity>
<View style={styles.postheadimage}/>
</TouchableOpacity>
<View style = {styles.postheadtext}>
<View style={styles.row}>
<Text style ={styles.posttitletext}>{item.title}</Text>
</View>
<View style ={styles.row}>
<Text style={styles.posttitletext}>{item.postUser}</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
)
}}
/>
</View>
</View>
</SafeAreaView>
);
};
帐户播放列表页面
import React, { useContext, useEffect } from 'react';
import { View, Text, StyleSheet, Image, FlatList, TouchableOpacity } from 'react-native';
import { Context as PlaylistContext } from '../../context/PlaylistContext';
import { navigate } from '../../navigationRef';
const Imagetake = ({url}) => {
url =url.replace('{w}', '100');
url = url.replace('{h}', '100');
return <Image style ={{height:'100%', width:'100%'}} source ={{url:url}}/>
};
const AccountPlaylist = ({ playList }) => {
const { getPlaylist } = useContext(PlaylistContext);
console.log('AccountPlaylist Page');
return (
<View style={{flex:1,}}>
<FlatList
data ={playList}
keyExtractor = {playlist => playlist._id}
renderItem = {({item}) => {
return (
<TouchableOpacity onPress={()=>{ navigate('SelectedPlaylist', {id: item._id , object:item}); getPlaylist({id:item._id, postUserId:item.postUserId}) ; }}>
<View style={styles.post}>
<View style ={styles.postcontent}>
<Imagetake url={item.image}></Imagetake>
</View>
<View style={styles.posthead}>
<TouchableOpacity>
<View style={styles.postheadimage}/>
</TouchableOpacity>
<View style = {styles.postheadtext}>
<View style={styles.row}>
<Text style ={styles.posttitletext}>{item.title}</Text>
</View>
<View style ={styles.row}>
<Text style={styles.posttitletext}>{item.postuser}</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
)
}}
/>
</View>
);
};
AccountPlaylist 道具(“播放列表”)是
result == 'playlist' ? <AccountPlaylist playList={userState.myPlayList}/>
userState 是另一个 Context(userContext) 状态。
解决方案
推荐阅读
- jenkins - Jenkins 插件依赖版本
- mysql - laravel 查询生成器添加和或条件
- reactjs - 有什么方法可以改变 Material-UI 添加样式标签 html 元素的位置吗?
- objective-c - 在 XCTestCase 中自动关闭对话框
- javascript - 服务工作者在本地服务时注册,但不能在线工作
- python - 性能问题:根据未来值标记 Pandas 系列中的项目
- python - Kivy:MDIconButton 不在 Gridlayout 中居中,并且带有按钮行为的 MDLabel 无法移动
- c++ - 当我尝试在 C++ 中编译和运行我的“main.cpp”文件时,导致调用中止方法的原因是什么?
- php - 在php中删除开始日期和结束日期之间的日期数组
- c++ - 如何在 C++ 中接受用户输入作为向量的长度