React 組件不會根據道具更改重新呈現

Question

我有 pdf-viewer 組件

export default function PDFViewer({keyword}) {
    const searchPluginInstance = searchPlugin({
        keyword,
    })
    const {Search} = searchPluginInstance;
  return (
    <div>
        <Search/>
        <Viewer plugins={[searchPluginInstance]} />
    </div>
  )
}

keyword是傳遞給組件的字符串數組。 傳遞的關鍵字列表在 pdf 文檔中突出顯示，即 function。但這僅適用於第一個渲染周期。 在我更新父組件中的關鍵字並將其傳遞到此處后，什么也沒有發生。

基本上，一旦它創建了searchPluginInstance實例，它就不會根據 props 的變化而改變。 我不知道如何解決問題？ 是否有設計模式或其他方法來處理這個問題？

這是圖書館

Answer 1

我認為，

如果您想在keyword state更改時重新呈現PDFViewer ，則應確保傳遞給PDFViewer組件的keyword必須是 react state 。

可能是你正在做那樣的事情 -

function ParentComponent() {
   let keyword = [...]
   return (
     <PDFViewer keyword={keyword} />
   )
}

嘗試這個 -

function ParentComponent() {
   const [keyword, setKeyword] = setState(arr);
   return (
     <PDFViewer keyword={keyword} />
   )
}

Answer 2

添加父組件代碼也會很有幫助，以便我們進行檢查。

一些建議：

1. 確保您傳遞的道具是新對象，以便 React 可以檢測到更改。
2. 嘗試精簡版本的父子組件代碼，看看它是否有效。