javascript - 第一次单击未呈现正确的数据[第二次单击有效]?
问题描述
我在这里有一个菜单,用水平平面列表制作:
菜单代码:
<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>
重新计算类别的代码:
const recalculateCategory = (rowData) => {
setSelectedCategory(rowData);
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);
});
};
它的工作原理是:如果您想查看选项帖子,请单击选项,然后它会相应地呈现数据。
我遇到了一个问题。
- 我们在“股票”
- 点击“OPTIONS”[注意数据与“STOCKS”相同]
- 再次点击“OPTIONS”,我们得到正确的数据
如何解决此要求以双击菜单类别?谢谢
解决方案
getCollection
您可以useEffect
在类别更改时调用它,而不是直接调用。
就像是:
useEffect(() => {
getCollection();
},[selectedCategory])
然后你recalculateCategory
会看起来像:
const recalculateCategory = (rowData) => {
setSelectedCategory(rowData);
};
useEffect
每当第二个参数中的参数更改时运行。您可能需要调整它们以适合您的用例,但selectedCategory
肯定会在那里。
推荐阅读
- reactjs - React 通过 Props 传递数组
- python - 如何在 Python 中加载当前为 JSON 格式的巨型(约 13 GB)手套矢量字典?
- vba - VBA 动态填充嵌套数据结构
- python - 如何按频率对字符串列表进行排序?
- python - 如何在pygame中添加多个瓦片地图级别?
- c++ - C++中的复制构造函数和赋值运算符
- c# - 静音除我在 C# 中的应用程序之外的所有内容
- javascript - Render list value updated by react hook
- django - django如何将带有img标签的html保存到数据库
- android - android,如何垂直居中对齐RelativeLayout的子项