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

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 值更改时，该方法都会再次运行。