React prop值在重新渲染期间初始化对象时没有更新

Question

我有一个组件，它在渲染期间创建一个配置对象。配置对象依赖于作为prop传入的值。当道具改变时，我希望配置对象内部的值更新。下面是组件的样子:

export const LeaseEditor = ({ onChange, leaseDocument, save, rentTableData }: any) => {
// rentTableData is the prop that will change
console.log(rentTableData) // this shows the correct values when the prop changes
const config = {
...
rentTable: {
rentTableRenderer: (domElement: any) => {
console.log('rentTableData in method', rentTableData) // when the prop changes, this value is not updated, it logs the previous value when this is invoked
ReactDOM.render(<RentTablePreview values={rentTableData} />, domElement)
},
},
}
return (
<div className="lease-editor">
<div className="lease-editor__toolbar" ref={toolbarElem}></div>
<div className="lease-editor__editable-container">
{leaseDocument.body && rentTableData && (
<CKEditor
editor={Editor}
isReadOnly={false}
config={config} // config object feeds in fine during the first render
data={leaseDocument.body}
/>
)}
</div>
</div>
)
}

当rentTableData更新时，该值在组件中被正确记录，但是当从配置中调用该方法时，它使用以前的值(第一次渲染时prop是什么)。

有什么办法可以解决这个问题吗?

Answer 1

我没有CKEditor的任何经验，但它可能没有考虑到configprop的变化，这将解释陈旧的值。你可以使用useRef(docs)让rentTableRenderer使用rentTableData的当前值。

只需添加一个新的常量rentTableDataRef，并将箭头函数体中的rentTableData替换为rentTableData.current:

export const LeaseEditor = ({ onChange, leaseDocument, save, rentTableData }: any) => {
// rentTableData is the prop that will change
console.log(rentTableData) // this shows the correct values when the prop changes
const rentTableDataRef = useRef(rentTableData)
const config = {
...
rentTable: {
rentTableRenderer: (domElement: any) => {
console.log('rentTableData in method', rentTableDataRef.current)
ReactDOM.render(<RentTablePreview values={rentTableDataRef.current} />, domElement)
},
},
}