Estoy tratando de renderizar un solo libro uno por uno desde redux cuando hago clic en el botón Siguiente libro. Lo logré usando el código a continuación, pero el problema es cuando trato de agregar un libro en los marcadores y hago clic en el siguiente libro, luego la estrella del siguiente libro también se muestra en naranja (que es el estado marcado). También traté de hacer un código btn de marcador como un componente para que su estado actual no se muestre en el próximo libro, pero aún se muestra. ¿Cómo puedo superar este problema? Se adjuntan imágenes del tema. estado marcado estado normal
const renderBooks = totalBooks?.books?.length && totalBooks?.books[bookIndex] && <View> <View style={styles.spaceBetween}> <TouchableOpacity onPress={() => navigation.goBack()}><AntDesign name="arrowleft" size={28} color="#0b466b" /></TouchableOpacity> <Bookmark book={totalBooks?.books[bookIndex]} /> </View> <ImageBackground source={totalBooks?.books[bookIndex].cover ? {uri: totalBooks?.books[bookIndex].cover} : BookCover} style={styles.bookCover}> </ImageBackground> <Text style={styles.bookTitle}>{totalBooks?.books[bookIndex].title}</Text> <ScrollView style={styles.bookDescriptionContainer} contentContainerStyle={{flexGrow: 1}}> <Text style={styles.bookDescription}> Lorem Ipsum is not simply random text. </Text> </ScrollView> <View style={styles.actionBtnsContainer}> <TouchableOpacity onPress={() => setOptionsPopUp(true)}> <Text style={styles.buyItBtn}>Buy it</Text> </TouchableOpacity> <TouchableOpacity onPress={() => nextBook()}> <Text style={styles.readItBtn}>Next Book</Text> </TouchableOpacity> </View> <View> const [addToBookmark, setAddToBookmark] = useState(false); const handleBookmarks = () => { const myBookmark = addToBookmark; setAddToBookmark(!myBookmark) if(!myBookmark) { console.log('Add') addInBookmarks(book) } else { console.log('remove') removeFromBookmarks(book) } } useEffect(() => { }, [addToBookmark]) return( <TouchableOpacity onPress={handleBookmarks}> <AntDesign name={addToBookmark ? "star" : "staro"} size={24} color={addToBookmark ? "#ff910c" : "#0b466b"} /> </TouchableOpacity> );En la función nextBook() puede intentar establecer el estado de setAddToBookmark(false) o si el libro ha sido marcado, el estado podría establecerse en falso o verdadero dependiendo de sus datos