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

Question

单击下一本书按钮时，我正在尝试从 redux 中逐一呈现单本书。我通过使用下面的代码实现了它，但问题是当我尝试在书签中添加一些书并单击下一本书然后下一本书星也显示为橙色（这是书签状态）。我还尝试将书签 btn 代码作为组件，以便其当前状态不会显示在下一本书中，但仍会显示。我该如何克服这个问题。附上问题图片。 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

在nextBook() 函数中，您可以尝试设置setAddToBookmark(false) 的状态，或者如果图书被标记，则可以根据您的数据将状态设置为 false 或 true