React-native：为平面列表中的每个组件呈现从 api 获取的信息时出现问题

Question

我正在 react-native 中开发一个应用程序，但我仍然是初学者，所以我认为我做错了什么。

该应用程序的逻辑如下：

• 首先，我从 API 获取餐馆列表
• 对于每家餐厅，我都会在平面列表中显示一张包含所有相关信息的“卡片”
• 对于每家餐厅，我需要从第二个 API（其 url 取决于餐厅的 ID）获取数据以获取其营业时间。 然后我想为每个餐厅显示一个 label “打开”或“关闭”

最后一步是给我带来麻烦的一步。 我尝试了两种不同的方法，但每种方法都有自己的问题。

首先，共同点：

    const [data, setData] = useState([]);

    useEffect(() => {
      let isMounted = true;
      fetch(url, {
        method: 'GET',
        headers:  
              {
                  'Content-Type'    : 'application/json',
                  'Accept'          : 'application/json'
              }              
            }
          )
        .then((response) => {
          return response.json()
        })
        .then((json) => { 
          if (isMounted)
            setData(json)
        })
        .catch((error) => console.error(error))
        .finally(() => {isMounted=false } );
    }, []); 

餐馆列表作为对象数组保存到“数据”state 中。 每家餐厅都有两个字段 'site_id' 和 'source' 需要从另一个 api 获取营业时间。

然后将餐厅呈现在平面列表中：

           <FlatList 
             data={data}
             renderItem={item => renderItem(item)}
             keyExtractor={restaurant => restaurant.site_id}
           />

其中renderItem如下：

    const renderItem = ({ item }) => (
        <RestaurantCard 
          source={item.source}
          site_id={item.site_id}
          />
    )

RestaurantCard 显示有关每家餐厅的各种信息。 简化：

    const RestaurantCard = props => (
          //some other info
          <View style={{ position: 'absolute', top: 0, left: 0 }}>
              // THIS IS WHERE I WANT TO SHOW IF THE RESTAURANT IS OPEN OR CLOSE
          </View>

所以现在我用来呈现营业时间信息的两种方法：

方法一

当我获取餐厅列表时，我遍历列表中的每个项目并调用新的 function 'saveOpeninghours'：

        .then((json) => { 
          if (isMounted)
            setData(json)
            for (let item of json.results) {
              saveOpeninghours(item.source,item.site_id)
            }
        })

此 function 然后为每个餐厅致电对应的 API 以检索营业时间信息。 此信息保存到名为“isOpen”的 state 数组中

 const [isOpen, setIsOpen] = useState([]);

 const saveOpeninghours = (source,site_id) => {

          let isMounted = true;
          fetch(restaurantUrl, {
            method: 'GET',
            headers:  {
                      'Content-Type'    : 'application/json',
                      'Accept'          : 'application/json',
                  }               
                }
              )
            .then((response) => {
              return response.json()
            })
            .then((openingHours) => { 
              if (isMounted)
                if(openingHours) {
                     //Do some stuff to determine if the restaurant is open or not
                          setIsOpen(isOpen => [...isOpen,{site_id:site_id,is_open:is_open}])
                        }
                      }
                    }
                }
            })
            .catch((error) => console.error(error))
            .finally(() => isMounted=false );
  };

所以数组将包含表单中的对象列表

{site_id:'18',is_open:true}

然后，我使用另一个 function 为每个餐厅呈现此信息：

const renderIsOpen = useCallback( (site_id,source) => {
  let index = isOpen.findIndex(obj => obj.site_id === site_id)
  if(index>0) {
    if(isOpen[index].is_open) {
      return( <Text> Open </Text>)
    }
    else {
      return( <Text> Close </Text>)
    }
  }
},[isOpen])

我使用带有 [isOpen] 的回调作为依赖项，因为我想等到数组填满所有餐馆。

然后在 RestaurantCard 中，我简单地将这个渲染称为 function：

    const RestaurantCard = props => (
          //some other info
              <View>{renderIsOpen(props.site_id,props.source)}</View>
)

这适用于几乎所有餐厅，但问题是列表中的第一家餐厅（有时是第二家）从不显示“打开/关闭”label。 我认为原因是当显示第一家餐厅时，'isOpen' state 尚未填满，但是对于其他餐厅，信息终于出现了，所以对他们来说没有这样的问题。 我认为使用带有 isOpen 的回调作为依赖可以解决问题并强制组件重新渲染并显示打开/关闭 label，但它不起作用。

方法二

这是更简单的一个。 我创建了一个单独的组件，为每个餐厅调用并检索/呈现营业时间信息：

const areEqual = (prevProps, nextProps) => true;

const OpeningHours = React.memo(props => {
    const [isOpen, setIsOpen] = useState();
        
          let isMounted = true;
          fetch(restaurantUrl, {
            method: 'GET',
            headers:  {
                      'Content-Type'    : 'application/json',
                      'Accept'          : 'application/json',
                  }               
                }
              )
            .then((response) => {
              return response.json()
            })
            .then((openingHours) => { 
              if (isMounted)
                if(openingHours) {
                          // do some stuff to determine if the restaurant is open or not
                          setIsOpen(is_open) //this is true or false
                        }
                      }
                    }
                }
            })
            .catch((error) => console.error(error))
            .finally(() => isMounted=false );

  
    if(isOpen) {
      return(
          <Text> Open </Text>  
      )
    }
    else {
      return(
          <Text> Close </Text>  
      )
    }

}, areEqual);

export default OpeningHours;

然后，在我之前显示的 RestaurantCard 中，我简单地将这个组件称为传递 'source' 和 'site_id' 作为道具：

    const RestaurantCard = props => (
          //some other info
              <OpeningHours
                source={props.source}
                site_id={props.site_id}
              />
)

这种方法的问题是：

• 它很慢：打开/关闭标签在餐厅卡中延迟几秒钟显示。 但是，这不是主要问题，而是以下问题：
• 在 RestaurantCard 中，我还有一个按钮，用户可以按下该按钮从收藏夹中添加/删除该餐厅。 当按钮被按下时，OpeningHours 被重新渲染，因此打开/关闭标签出现/消失，这看起来很烦人。 如您所见，我试图将组件包装在“React.memo”中以防止重新渲染，但它不起作用。

---

所以基本上我想弄清楚

1. 最好的方法是什么？ 我认为这是第二个，因为它更简单，但是与第一个相比似乎要慢得多（顺便说一句，餐厅的列表并不大，只有 10 项）
2. 如何解决与所选方法相关的问题？

谢谢！