React native 反应本机条件设置状态

我为每个用户提供了一系列“最喜欢的”列表。我想设置一个状态变量，具体取决于它是呈现收藏夹项目还是常规（非收藏夹）项目。这是一个小心形图标，可以是已填充的，也可以是未填充的。它错误地设置了第一次渲染时的状态。刷新后正确设置。。我做了一些错误的事情，尝试了很多事情都没有结果，所以如果有人能看看这段代码，告诉我你是否看到了任何明显的缺陷。如果没有，我会到别处去寻找问题

加载应用程序时的行为：在状态设置为显示是否为收藏夹以及收藏夹状态变量的内容（图像url，但在控制台中，非fav显示为21，fav显示为22）之后，我正在执行console.log。我可以看出，它正确地提取了收藏夹数组，并正确地识别了哪些是收藏夹，哪些不是收藏夹（1表示它是收藏夹）。但是，它没有正确设置状态变量。此外，它仅为部分列表正确设置了它。目前，我所有的物品都被标记为收藏夹，而这只会弄乱前10个。在那之后，他们都准备好了。更奇怪的是，在刷新屏幕时，它正确地设置了所有这些

MainHeader.js（从数据库中提取数据，设置收藏列表的初始数组，并将其传递给messagesScreen组件）

查看我的控制台，您可以看到它正确地将每个列表显示为收藏夹，但对于前10个列表，它将状态设置为错误的图像（21，以红色显示）。这些都应该是22

---

我能够完成我所需要的，方法是制作一个全新的组件，只让心脏图像显示为喜欢或不喜欢，并在设置状态之前通过isRendered测试加入useEffect。出于某种原因，我的大脑真的很难理解异步函数的概念，以及如何将它们应用到程序流中。我能够完成我所需要的工作，方法是制作一个全新的组件，只让心脏图像显示为喜欢或不喜欢，并在设置状态之前通过isRendered测试加入useEffect。出于某种原因，我的大脑真的很难理解异步函数的概念以及如何将它们应用到程序流中。

const [favsArray, setFavsArray] = useState("");
  useEffect(() => {
    lookupUser()
    .then((snapshot) => {
      if (snapshot.hasChildren()) {
        snapshot.forEach(function(childSnapshot) {
          let favs = childSnapshot.child("favorites").val();
          setFavsArray(favs);
        })
      }         
    })
    .catch((error) => {console.error('Error:', error)});
  }, []);
  return (
    <NavigationContainer>
      <View style={styles.headerContainer}>
        <Image
          style={styles.image}
          source={require("../assets/newheader4.png")}
        />
      </View>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: "blue",
          inactiveTintColor: "black",
          style: {},
          tabStyle: {
            width: "auto",
            backgroundColor: "#e0d5f3",
            borderTopWidth: 3,
            borderBottomWidth: 3,
            borderRightColor: "gray",
          },
          labelStyle: {
            fontSize: 14,
            fontWeight: "bold",
          },
          scrollEnabled: true,
        }}
      >
        <Tab.Screen name="All Deals" children={()=><MessagesScreen favsArray={favsArray} setFavsArray={setFavsArray}/>} />
      </Tab.Navigator>
    </NavigationContainer>

<FlatList
          data={messagesShow}
          keyExtractor={(messagesShow) => messagesShow.id.toString()}
          renderItem={({ item }) => (
            <Card
              price={item.currentPrice}
              title={item.title}
              image={item.image}
              posted={item.postedDate}
              discAmount={item.discountAmount}
              discType={item.discType}
              expiration={item.expiration}
              promoCode={item.promoCode}
              affLink={item.amzLink}
              indexStore={item.indexStore}
              store={item.store}
              favsArray = {favsArray}
            />
          )}
          ItemSeparatorComponent={ListItemSeparator}
          contentContainerStyle={styles.messagesList}
          refreshing={refreshing}
          onRefresh={() =>
            db.ref('deals').once('value', (snapshot) =>{
              let testData = [];
              snapshot.forEach((child)=>{
              //  if (child.val().hasOwnProperty('title')){
                  testData.push({
                    id: child.key,
                    title: child.val().hasOwnProperty('title') ? child.val().title : 'NA',
                    currentPrice: child.val().price,
                    discountAmount: child.val().discAmt,
                    discType: child.val().discType,
                    promoCode: child.val().promoCode,
                    expiration: child.val().expDate,
                    postedDate: child.val().postDate,
                    image: { uri: child.val().imageLink}, 
                    amzLink: child.val().affLink,
                    category: child.val().category,
                    indexStore: child.val().indexStore,
                    store: child.val().store
                  })
            //  }
                checkMessages(testData);
              }) 
            })
            .then()
            .catch((error) => {console.error('Error:', error)})
          }
        />

  let test = [];
  test = favsArray.split(',');
  let isFav = 0;
  let found = test.find(function (element) { 
    return element == indexStore; 
  }); 
  if (found != undefined){
    isFav = 1;
  }

  const [heartFilled, setHeartFilled] = useState( isFav == 1 ? require('../assets/heartFilled.png') : require('../assets/heartEmpty.png'));
  console.log(isFav + ' ' + heartFilled);