Tengo un React.Component con un estado modalVisible para abrir un Modal:
<Modal visible={this.state.modalVisible} > <FormStructure record={this.state.selectedRecord} question={this.state.question} dropdownItems={this.state.dropdownItems} /> </Modal> Después de que Modal abre React.FC <FormStrucutre ... /> se procesa y el problema es que no sé cómo cambiar el valor de estado modalVisible dentro de 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'. };Tienes que pasar el método closeModal a 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>Usa los accesorios en FormStructure
// FormStructure.tsx const FormStructure = (props: any) => { const {record, question, dropdownItems, closeModal} = props; const onSubmit = () => { .... closeModal(); } }Un patrón común es pasar las devoluciones de llamada como accesorios, y los componentes secundarios llaman a las devoluciones de llamada cuando ocurren eventos. En este caso, podría exponer un accesorio 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(); }; }