[英]First click not rendering correct data [second click works]?
I have a menu here, made with a horizontal flatlist:我在这里有一个菜单,用水平平面列表制作:
Code for menu:菜单代码:
<View style={{ position: 'absolute', left: 0, top: 0 }}>
<FlatList
horizontal
data={categories}
extraData={
selectedCategory // for single item
}
style={styles.flatList}
renderItem={({ item: rowData }) => (
<TouchableOpacity
onPress={() => recalculateCategory(rowData)}
style={rowData === selectedCategory ? styles.selected : styles.unselected}
>
<Text style={{ fontWeight: 'bold', color: '#FFFFFF', padding: 6 }}>
{ rowData }
</Text>
</TouchableOpacity>
)}
keyExtractor={(item, index) => item.toString()}
/>
</View>
Code for recalculateCategory:重新计算类别的代码:
const recalculateCategory = (rowData) => {
setSelectedCategory(rowData);
getCollection();
};
code for getCollection: getCollection 的代码:
const getCollection = async() => {
setIsLoading(true);
const index = 1;
const getThoughtsOneCategory = Firebase.functions().httpsCallable('getThoughtsOneCategory');
await getThoughtsOneCategory({
index,
category: selectedCategory,
}).then((result) => {
setThoughts(result.data);
setIsLoading(false);
}).catch((err) => {
console.log(err);
});
};
How it works is: if you want to see options posts, you click options, and it renders the data accordingly.它的工作原理是:如果您想查看选项帖子,请单击选项,然后它会相应地呈现数据。
I am running into an issue.我遇到了一个问题。
How can I fix this requirement to double click on a menu category?如何解决此要求以双击菜单类别? Thanks
谢谢
Instead of calling getCollection
directly, you could use useEffect
to call it whenever the category changes.您可以使用
useEffect
在类别更改时调用它,而不是直接调用getCollection
。
Something like:就像是:
useEffect(() => {
getCollection();
},[selectedCategory])
And then your recalculateCategory
would just look like:然后你的
recalculateCategory
看起来像:
const recalculateCategory = (rowData) => {
setSelectedCategory(rowData);
};
useEffect
runs whenever the parameters in the second argument change.每当第二个参数中的参数更改时,
useEffect
运行。 You may need to adjust them to fit your use case, but selectedCategory
would definitely be in there.您可能需要调整它们以适合您的用例,但
selectedCategory
肯定会在那里。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.