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

【问题标题】：React Typescript: SetState inside React.FC to change value in React.ComponentReact Typescript：在 React.FC 中设置状态以更改 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}

标签： javascript reactjs typescript

【解决方案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();
    };
}

【讨论】：