Question

我正在尝试从 FlatList 中的 keyExtractor 获取 ID，并将该 ID 提供给一个模态，以便它可以显示来自 API 的信息。当前实现抛出警告 - “无法从不同组件的函数体内部更新组件。”问题是我想不出另一种方法来更新该模态。

相关代码如下：

    export default function AllList() {
  const [isLoading, setLoading] = useState(true);
  const [drinkData,setDrinkData] = useState([]);
  const [searchValue, onChangeText] = useState(''); //needed for search
  const [reloading, setReloading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false); //normal modal visibility handler
  const [idDrink, setIdDrink] = useState(0);

  const renderItem = ({ item }) => {
    setIdDrink(item.id);

    return (
      <RowCard id={item.idDrink} image={item.strDrinkThumb} title={item.strDrink} alcontent={item.strAlcoholic} 
        ingredient1={item.strIngredient1} ingredient2={item.strIngredient2} ingredient3={item.strIngredient3} setModalVisible={setModalVisible}
      />
    );
  };

  useEffect (() =>  { 
    fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=' + searchValue)
      .then((response) => response.json())
      .then((json) => setDrinkData(json.drinks))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
      
  },[drinkData]);
  
  return (
    
    <View style = {styles.screen}>
      <View style = {styles.searchSection}>
        <TextInput 
          placeholder="Search Drinks..."  
          style={styles.input}
          onChangeText={text => onChangeText(text)}
          value={searchValue}/>
      </View>
      <FlatList
        data={drinkData}
        keyExtractor={({ idDrink }, index) => idDrink}
        removeClippedSubviews={true}
        initialNumToRender={5}
        renderItem={renderItem}
        extraData={reloading}
        
      />
      <DrinkPopup modalVisible={modalVisible} setModalVisible={setModalVisible} drinkID={idDrink}/>
      
    </View>
      
  );

};

另一位用户帮助我做到了这一点，但我时间紧迫，需要尽快解决这个问题。

Answer 1

你可以试试这个吗

  keyExtractor={(item) => item. idDrink}

在 flatlist drinkData 是你的数组。所以你必须从每个对象中选择 idDrink。

如何从 FlatList keyExtractor 获取 ID 并在模态中使用它？

1 个答案: