如何在屏幕变化时清理 state？（使用条件渲染）

Question

What I'm trying to do is clean a state of my objects props in my class component on screen change

here is where I'm rendering the fields:

class InputBody extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: JSON.parse(this.props.route).message,
    };       
  }
  render() {
    return (
      <Fragment>
        {Object.keys(JSON.parse(this.props.route).message).length > 0 ? (
          <FieldArraysForm all={JSON.parse(this.props.route).message} native={this.props} />
        ) : (
          <ActivityIndicator size="large" color="#eb6b09" />
        )}
      </Fragment>
    );
  }
}

Then I'm handling my fields and input types in here:

class RenderField extends Component {
  render() {
    return (
      <Fragment>
        <Texto>{this.props.label}</Texto>
        <TextInput
          onChangeText={this.props.input.onChange}
          {...this.props.input}
          keyboardType={this.props.type}
        />
      </Fragment>
    );
  }
}

And finally I'm getting the values:

class FieldArraysForm extends Component {
  render() {
    const {handleSubmit} = this.props.native;
    // event listener
    const getFields = async (values) => {
      return sleep(500).then(() => {
        // implementar prop.reset() as soon as I leave the screen, but how can I make it ?
        console.log(JSON.stringify(values))
      })
    }
    return (
      <Form>
        {this.props.all.map((item) => (
          <Field
            key={item._id}
            name={`customInput.${item._id}`}
            component={RenderField}
            label={item.field}
            type={item.typeFieldAltText}
          />
        ))}
        <View>
          <TouchableOpacity onPress={handleSubmit(getFields)}>
            <Text>Save Form</Text>
          </TouchableOpacity>
        </View>
      </Form>
    );
  }
}

Someone knows how can I clean my state in class component ?

Obs: I'm using: react-navigation v6 .

Answer 1

Make a reset function in your InputBody component and pass that function as a prop to your FieldArrayForm compoent.

class InputBody extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fields: JSON.parse(this.props.route).message,
    };       
  }

  reset () {
    this.setState({});
  }

  render() {
    return (
      <Fragment>
        {Object.keys(JSON.parse(this.props.route).message).length > 0 ? (
          <FieldArraysForm all={JSON.parse(this.props.route).message} resetForm={reset} native={this.props} />
        ) : (
          <ActivityIndicator size="large" color="#eb6b09" />
        )}
      </Fragment>
    );
  }
}

Then call that reset props in your FieldArraysForm component

const getFields = async (values) => {
      return sleep(500).then(() => {
        // implementar prop.reset() as soon as I leave the screen, but how can I make it ?
        console.log(JSON.stringify(values))
        this.props.reset()
      })
    }