У меня есть родительский компонент, который отображает пользовательскую форму, я использую избыточную форму в пользовательской форме, и я пытаюсь сделать это, когда дочерний компонент отключается, если в форме есть какие-либо значения, которые мне нужны для созданиязапрос пользователю, хотите ли вы сохранить его или нет.
Итак, ниже приведен код, запрос не происходит, я использую состояние и обновляю состояние, используя грязный (this.props) из избыточной формы.
, поэтому после componentWillUnmount рендеринг не происходит.Чего мне не хватает, я думаю, что после componentWillUnmount рендеринг не произойдет.
Пожалуйста, смотрите код ниже.
**//APP.js**
import React from 'react';
class App extends Component{
state ={
data = []// array of data
}
render(){
return(
<div>
<CustomForm
data={this.state.data}
/>
</div>
)
}
}
export default App
**//CustomForm.js**
import React from 'react';
import {connect} from 'react-redux';
import CustomField from './CustomField';
import { Field, reduxForm } from 'redux-form';
import {Prompt} from 'react-router'
class CustomForm extends Component{
state ={
formChanged: false
}
onSubmit = (values) => {
console.log(values)
}
componentWillUnmount(){
if(this.props.dirty){
this.setState({
formChanged: true
})
}
}
render(){
return(
<div>
{
this.state.formChanged?
<Prompt
when={shouldBlockNavigation}
message='You have unsaved changes, are you sure you want to leave?'
/>
:
null
}
<Form onSubmit={handleSubmit(this.onSubmit)}>
<Field
name="field1"
type="text"
component={CustomField}
label="field1"
/>
</Form>
</div>
)
}
}
export default reduxForm({
form: "NewForm",
destroyOnUnmount: true,
forceUnregisterOnUnmount: false
})(connect(mapStateToProps, mapDispatchToProps)(CustomForm))