React Typescript：在 React.FC 中设置状态以更改 React.Component 中的值

Posted 2023-02-21

【中文标题】React Typescript：在 React.FC 中设置状态以更改 React.Component 中的值

【英文标题】：React Typescript: SetState inside React.FC to change value in React.Component

【发布时间】：2022-01-23 21:46:57

【问题描述】：

我有一个React.Component 状态为modalVisible 来打开一个模态：

<Modal
   visible=this.state.modalVisible
>
   <FormStructure
      record=this.state.selectedRecord
      question=this.state.question
      dropdownItems=this.state.dropdownItems
   />
</Modal>

Modal 打开后React.FC <FormStrucutre ... /> 被渲染，问题是我不知道如何更改modalVisible 内的状态值React.FC：

 const Submit = () => 
        fetch('api/Call/Save', 
            headers:  'Content-Type': 'application/json' ,
            method: 'POST',
            body: JSON.stringify(
                'No': form.getFieldValue('no')
            )
        )
            .then(() => this.setState(modalVisible: false); //TS2532  (TS) Object is possibly 'undefined'.
    ;

【问题讨论】：

这有帮助吗？ this!.setState(modalVisible: false

【参考方案1】：

你必须将 closeModal 方法传递给React.FC <FormStructure />

// class component

<Modal
   visible=this.state.modalVisible
>
   <FormStructure
      record=this.state.selectedRecord
      question=this.state.question
      dropdownItems=this.state.dropdownItems
      closeModal=() => this.setState(modalVisible: false)
   />
</Modal>

使用 FormStructure 中的道具

// FormStructure.tsx

const FormStructure = (props: any) => 
  const record, question, dropdownItems, closeModal = props;

  const onSubmit = () => 
     ....
     closeModal();
  

【参考方案2】：

一个常见的模式是将回调作为 props 传入，子组件在事件发生时调用回调。在这种情况下，您可以公开 onSave 道具：

// parent
<Modal
   visible=this.state.modalVisible
>
   <FormStructure
      record=this.state.selectedRecord
      question=this.state.question
      dropdownItems=this.state.dropdownItems
      onSave=() => this.setState(modalVisible: false)
   />
</Modal>


// child
class FormStructure extends React.Component 
   const Submit = () => 
        fetch('api/Call/Save', 
           // ...
        )
            .then(() => this.props.onSave();
    ;