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

【问题标题】：First click not rendering correct data [second click works]?第一次单击未呈现正确的数据[第二次单击有效]？
【发布时间】：2021-08-08 05:51:21
【问题描述】：

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

菜单代码：

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

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

我遇到了问题。

我们在“STOCKS”

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

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

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

【问题讨论】：

您似乎没有包含足够的代码来诊断此问题。你能创建一个minimal reproducible example吗？
具体来说``recalculateCategory(rowData)，看看它做了什么会很好
@StarshipladDev 嘿！我添加了更多代码
@jnpdx 嘿！我添加了更多代码。获取发生在云功能中，如有必要，我也可以添加，但这对我来说似乎是前端的一个问题，因为根据日志可以正常工作
setSelectedCategory 是异步的，在您调用 getCollection 时还没有完成。您应该使用useEffect 运行getCollection 或将类别作为参数发送到getCollection。你知道怎么做吗？

标签： javascript react-native google-cloud-functions expo

【解决方案1】：

除了直接调用getCollection，您还可以使用useEffect在类别发生变化时调用它。

类似：

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

然后你的 recalculateCategory 看起来就像：

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

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

【讨论】：