我正在尝试从 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>
);
};
另一位用户帮助我做到了这一点,但我时间紧迫,需要尽快解决这个问题。
答案 0 :(得分:1)
你可以试试这个吗
keyExtractor={(item) => item. idDrink}
在 flatlist drinkData
是你的数组。所以你必须从每个对象中选择 idDrink
。