Reactjs ReactNative useEffect父子数据刷新
useEffect导致我在获取数据和重新加载带有最新数据的弹出窗口时出现一些问题,而弹出窗口没有更新Reactjs ReactNative useEffect父子数据刷新,reactjs,react-native,react-hooks,Reactjs,React Native,React Hooks,useEffect导致我在获取数据和重新加载带有最新数据的弹出窗口时出现一些问题,而弹出窗口没有更新 ScreenA获取数据并将数据加载到SamplePopup中-OK SamplePopup能够获取并呈现此数据-确定 在SamplePopup上,您按下一个按钮触发屏幕a上的刷新-OK ScreenA获取新数据(OK),但是现在SamplePopup没有获取新数据-FAIL 关于如何从父屏幕A获取SamplePopup的最新数据有什么想法吗 const ScreenA = ({navigatio
const ScreenA = ({navigation, route}) => {
const [showPopup, setShowPopup] = useState(false);
const [data, setData] = useState({
refreshing: false,
fruits: [],
vegetables: []
});
useEffect(() => {
retrieveData();
}, [data.refreshing]);
retrieveData = async () => {
let incomingFruits = [];
let incomingVegetables = [];
try {
const response = await fetch('api/fruits');
let json = await response.json();
incomingFruits = json.fruits;
} catch (error) {
}
try {
const response = await fetch('api/vegetables');
let json = await response.json();
incomingVegetables = json.vegetables;
} catch (error) {
}
setData({
refreshing: false,
fruits: incomingFruits,
vegetables: incomingVegetables
});
}
const refresh = () => {
retrieveData()
}
return (
<SafeAreaView style={{flex: 1}}>
{
showPopup ?
<SamplePopup
onPress={() => refresh()}
data={data}
showPopup={showPopup}
refreshing={data ? data.refreshing : false} />
: null
}
<TouchableWithoutFeedback onPress={() => setShowPopup(true)}>
<View >
<Text style={{paddingLeft: 5}}>Show Popup</Text>
</View>
</TouchableWithoutFeedback>
</SafeAreaView>
)
}
// SamplePopup
const SamplePopup = (props) => {
useEffect(() => {
console.log('data refresh')
console.log(props.data)
}, []);
onRefresh = () => {
props.onPress('REFRESH');
}
return (
<Modal
animationIn="slideInRight"
animationOut="slideOutRight"
isVisible={props.showPopup}>
<View style={{flex: 1}}>
<TouchableWithoutFeedback onPress={() => onRefresh()}>
<View >
<Text style={{paddingLeft: 5}}>Fetch new data</Text>
</View>
</TouchableWithoutFeedback>
</View>
</Modal>
)
}
const ScreenA=({navigation,route})=>{
const[showPopup,setShowPopup]=useState(false);
const[data,setData]=useState({
刷新:错,
水果:[],
蔬菜:[]
});
useffect(()=>{
检索数据();
},[data.refreshing]);
retrieveData=async()=>{
让收益=[];
让我们把蔬菜收入=[];
试一试{
const response=wait fetch('api/fruits');
让json=wait response.json();
incomingFruits=json.fruits;
}捕获(错误){
}
试一试{
const response=wait fetch('api/蔬菜');
让json=wait response.json();
incomingvegetes=json.vegetes;
}捕获(错误){
}
设置数据({
刷新:错,
水果:水果,
蔬菜:加入蔬菜
});
}
常数刷新=()=>{
检索数据()
}
返回(
{
显示弹出窗口?
刷新()}
数据={data}
showPopup={showPopup}
刷新={data?data.reshing:false}/>
:null
}
setShowPopup(真)}>
显示弹出窗口
)
}
//样本弹出
const SamplePopup=(道具)=>{
useffect(()=>{
console.log('数据刷新')
console.log(props.data)
}, []);
onRefresh=()=>{
onPress道具(“刷新”);
}
返回(
onRefresh()}>
获取新数据
)
}
我在这里添加建议,因为它有点长,并且包含代码
数据正在更新,这只是您尝试登录的日期
useEffect(() => {
console.log('data refresh')
console.log(props.data)
}, []);
此useEffect的回调仅在第一次渲染后运行一次。
尝试打印useEffect之外的值。您将获得更新的数据
谢谢。如果它解决了您的问题,请告诉我。它可能可以打印,但我需要处理数据,并且它会显示太多的重新渲染无限循环。