第一次单击未呈现正确的数据[第二次单击有效]？

Question

我在这里有一个菜单，用水平平面列表制作：

菜单代码：

<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);
    });
  };

它的工作原理是：如果您想查看选项帖子，请单击选项，然后它会相应地呈现数据。

我遇到了一个问题。

1. 我们在“股票”

2. 点击“OPTIONS”[注意数据与“STOCKS”相同]

3. 再次点击“OPTIONS”，我们得到正确的数据

如何解决此要求以双击菜单类别？ 谢谢

Answer 1

您可以使用useEffect在类别更改时调用它，而不是直接调用getCollection 。

就像是：

useEffect(() => {
  getCollection();
},[selectedCategory])

然后你的recalculateCategory看起来像：

const recalculateCategory = (rowData) => {
  setSelectedCategory(rowData);
};

每当第二个参数中的参数更改时， useEffect运行。 您可能需要调整它们以适合您的用例，但selectedCategory肯定会在那里。