[英]React component doesn't rerender based onprops change
I have pdf-viewer component我有 pdf-viewer 组件
export default function PDFViewer({keyword}) {
const searchPluginInstance = searchPlugin({
keyword,
})
const {Search} = searchPluginInstance;
return (
<div>
<Search/>
<Viewer plugins={[searchPluginInstance]} />
</div>
)
}
keyword
is an array of strings that are passed down to the component. keyword
是传递给组件的字符串数组。 That passed keyword list is highlighted in the pdf doc that is the function. But this works only for the first render cycle.传递的关键字列表在 pdf 文档中突出显示,即 function。但这仅适用于第一个渲染周期。 After I update the keyword in the parent component and pass it here, nothing is happening.
在我更新父组件中的关键字并将其传递到此处后,什么也没有发生。
Basically, once it creates the searchPluginInstance
instance, It won't change based on the props changes.基本上,一旦它创建了
searchPluginInstance
实例,它就不会根据 props 的变化而改变。 I don't know how to address thing issue?我不知道如何解决问题? Is there a design pattern or something to handle this issue?
是否有设计模式或其他方法来处理这个问题?
I think,我认为,
You should make sure that the keyword
passed down to PDFViewer
component has to be a react state
if you want to rerender the PDFViewer
when keyword state
changes.如果您想在
keyword state
更改时重新呈现PDFViewer
,则应确保传递给PDFViewer
组件的keyword
必须是 react state
。
might be you are doing something like that -可能是你正在做那样的事情 -
function ParentComponent() {
let keyword = [...]
return (
<PDFViewer keyword={keyword} />
)
}
Try this -尝试这个 -
function ParentComponent() {
const [keyword, setKeyword] = setState(arr);
return (
<PDFViewer keyword={keyword} />
)
}
It would be helpful to add the parent component code too so that we can check.添加父组件代码也会很有帮助,以便我们进行检查。
Some suggestions:一些建议:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.