Question

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

这是我的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

Answer 1

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

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

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

如何重新渲染或多次调用屏幕本机

1 个答案: