在重新渲染期间，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 的经验，但它可能不会考虑对 config 属性的更改，这可以解释陈旧的值。您可以使用 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)
      },
    },
  }

在重新渲染期间，React prop 值未在对象初始化中更新

React prop value not updating in object initialization during re render

reactjs

ckeditor

ckeditor5