时间戳

首页 > 解决方案 > 如何重新渲染或多次调用屏幕反应原生

reactjs - 如何重新渲染或多次调用屏幕反应原生

问题描述

嗨，我有一个简单的面板，显示每个部分有多少个对象，现在我的代码在第一次加载时显示正确的数字，问题是当用户在一个部分中插入一个新对象时，因为函数不会再次加载它不会带来新的价值

这是我的 api 代码，这是我每次显示屏幕时都需要克隆或初始化的代码

const Panel = ({navigation}) => {

const [irregularities, setvirregularities] = useState();
const [approved, setvapproved] = useState();
const [sent, setvsent] = useState();
const [rejected, setvrejected] = useState();

useEffect(() => { 
  async  function Badge() { 
   const vCreationUser = await AsyncStorage.getItem('id');
   const { data } = await ForceApi.post(`/GetTotalRequestController.php`, {vCreationUser});
   console.log('UNO');
     setvirregularities(data.irregularities);
     setvapproved(data.request_approved);
     setvsent(data.sent);
     setvrejected(data.rejected);
   }
 Badge();
},[]);

这是我显示从 api 获得的信息的地方

return (
    <View style={styles.container}>
        <View style={styles.buttonContainer}> 
            <View>
                <TouchableOpacity style={styles.linkContainer} onPress={() => navigation.navigate('Solicitudes1')}>
                    <View style={irregularities == 0 ? styles.Badge2 : styles.Badge} ><Text style={styles.BadgeTXT}>{irregularities >= 100 ? '99+' : irregularities}</Text></View>
                    <View style={styles.buttonTextContainer}><Text style={styles.textPanel}>Irregularidades</Text></View>
                </TouchableOpacity>
            </View>
            <TouchableOpacity style={styles.linkContainer} onPress={() => navigation.navigate('Solicitudes2')}>
                <View style={approved == 0 ? styles.Badge2 : styles.Badge} ><Text style={styles.BadgeTXT}>{approved >= 100 ? '99+' : approved}</Text></View>
                <View style={styles.buttonTextContainer}><Text style={styles.textPanel}>Cons. Apro.</Text></View>
            </TouchableOpacity>
            <TouchableOpacity style={styles.linkContainer} onPress={() => navigation.navigate('Solicitudes3')}>
                <View style={sent == 0 ? styles.Badge2 : styles.Badge} ><Text style={styles.BadgeTXT}>{sent >= 100 ? '99+' : sent}</Text></View>
                <View style={styles.buttonTextContainer}><Text style={styles.textPanel}>Enviadas</Text></View>
            </TouchableOpacity>
            <TouchableOpacity style={styles.linkContainer} onPress={() => navigation.navigate('Solicitudes4')}>
                <View style={rejected == 0 ? styles.Badge2 : styles.Badge} ><Text style={styles.BadgeTXT}>{rejected >= 100 ? '99+' : rejected}</Text></View>
                <View style={styles.buttonTextContainer}><Text style={styles.textPanel}>Rechazadas</Text></View>
            </TouchableOpacity>
        </View>
    </View>
);

TLDR：它类似于 facebook 上的通知，问题是每次值发生变化时我都需要重新渲染 useEfect

标签： reactjsreact-nativereact-native-android

解决方案

也许我需要你的代码的更多上下文，但你可以尝试使用useEffect 方法的参数数组。

useEffect(() => { }, [flagForNewObject])

上面，每次 flagForNewObject 值更改时，该方法都会再次运行。

推荐阅读