当 prop 改变时重新渲染反应组件

Question

所以我有一个子组件，它是一个代码编辑器。我正在向它传递道具，即。一个 editorInitialValue [当我从多个规则选项中选择不同的规则时发生变化，从而重新初始化编辑器组件]、规则和 updateRuleBody [在触发时更新规则的内容/正文]，以及一个键，它是该规则的名称。

下面是我的父组件。现在除了格式部分之外的所有内容都正常工作。 当我单击“格式”时，它确实实际上格式化了规则的内容，并且规则正文也随着格式化的内容而更新，但是编辑器组件没有获得格式化的规则。当使用“格式”时，我试图让编辑器具有更新的（格式化的）规则。解决此问题的好方法是什么？

const {currentRuleView, deleteRule, saveRule, updateRuleBody} = this.props;
const {queries, suppressions} = this.props.rules;
const rules = [...queries, ...suppressions];
const rule = rules.find((r) => r.viewName === currentRuleView);

return (
  <div>
    <Provider store={cmstore}>
      <Codemirror  <Codemirror  
            key = {rule?.viewName}
            editorInitialValue={ rule ? rule?.raw.body.toString():''}
            editorRule={rule}
            updateRuleBody={updateRuleBody}
          />
        <div className="app"></div>
        <Button                                             // this is working fine
          type="primary"
          disabled={!rule || rule.isSaving || (rule.isSaved && !rule.isEdited)}
          onClick={() => rule && saveRule(rule)} > 
          {rule && rule.isSaving ? <LoadingOutlined /> : <UploadOutlined />} Apply
        </Button>
        <Button                                            // this is also working fine
          type="default"
          disabled={!rule || rule.isSaving || (rule.isSaved && !rule.isEdited)}
          onClick={() => rule && updateRuleBody(rule.viewName, rule.raw.savedBody)}
           >
          <RollbackOutlined /> Revert
          </Button>       
                       

        <Button                                           // works as well
          type="default" disabled={!rule || rule.isSaving} onClick={() => rule && deleteRule(rule.raw)}>
          <DeleteOutlined /> Delete
        </Button>
       

        <Button                                          // this is the formatter, and the problematic bit
          type="default"
          disabled={!rule || rule.isSaving}
          onClick={() => { 
            rule && updateRuleBody(rule.viewName, sqlFormatter.format(rule.raw.body))
            console.log(sqlFormatter.format(rule.raw.body))     //this does show the formatted (thus the updated) rule                                                                                                                                      
            }}
        >
          <CheckCircleOutlined /> Format
        </Button>

这是我的编辑器组件。

const Codemirror: React.FC<{

  editorInitialValue: string | undefined;
  editorRule: Query | Suppression | undefined;
  updateRuleBody: typeof updateRuleBody;
}> = ({editorInitialValue, editorRule, updateRuleBody }) => {



  const [editorValue, setEditorValue] = useState<string>('');
  const [editorTreeValue, setEditorTreeValue] = useState<string[]>([]);

  const editor = useRef<EditorView>();
 
  const onUpdate = (editorRule: any) =>
    EditorView.updateListener.of((view: ViewUpdate) => {
      const editorDocument = view.state.doc;
      
      const docString = editorDocument.toString();
      cmstore.dispatch(updateEditorValue(docString));
      updateRuleBody(editorRule?.viewName.toString(),docString);
    });

  // Initilize view
  useEffect( function initEditorView() {
      const elem = document.getElementById('codemirror-editor')!;
      if (editor.current) {
        elem.children[0].remove();
      }

      editor.current = new EditorView({
        state: EditorState.create({
          doc: editorInitialValue,
          extensions: [
            lineNumbers(),
            highlightSpecialChars(),
            history(),
            foldGutter(),
            drawSelection(),
            EditorState.allowMultipleSelections.of(true),
            indentOnInput(),
            Prec.fallback(defaultHighlightStyle),
            bracketMatching(),
            closeBrackets(),
            autocompletion(),
            rectangularSelection(),
            highlightActiveLine(),
            highlightSelectionMatches(),
            keymap.of([
              ...closeBracketsKeymap,
              ...defaultKeymap,
              ...searchKeymap,
              ...historyKeymap,
              ...foldKeymap,
              ...commentKeymap,
              ...completionKeymap,
            ]),
            sql(),
            oneDark,
            onUpdate(editorRule),
          ],
        }),
        parent: elem as Element,
      });
    },
    [],

  );