反应原生组件在渲染时不更新其 state

Question

I am trying to render single book one by one from redux when click on next book button. I achieved it by using below code but issue is when i try to add some book in bookmarks and click on next book then next book star also showed as orange (which is bookmarked state). I also tried to make a bookmark btn code as a component so that its current state wont show in the next book but its still showing. How can i overcome this issue. Images of issue are attached. bookmarked state normal state

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>
  );

Answer 1

In the function nextBook() you can try set the state of setAddToBookmark(false) or if the book as been marked the state could be set to false or true dependig your data