如何清除屏幕变化时的状态？（使用条件渲染）答案

【问题标题】：How to clean the state on screen change ?(using conditional rendering)如何清除屏幕变化时的状态？（使用条件渲染）
【发布时间】：2021-12-17 19:18:29
【问题描述】：

我要做的是在屏幕更改时清除我的类组件中的对象道具的状态

这里是我渲染字段的地方：

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>
    );
  }
}

然后我在这里处理我的字段和输入类型：

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>
    );
  }
}

最后我得到了值：

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>
    );
  }
}

有人知道我如何清理class component 中的状态吗？

Obs：我正在使用：react-navigation v6。

【问题讨论】：

标签： javascript react-native

【解决方案1】：

在您的 InputBody 组件中创建一个重置函数，并将该函数作为道具传递给您的 FieldArrayForm 组件。

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>
    );
  }
}

然后在您的 FieldArraysForm 组件中调用该重置道具

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()
      })
    }

【讨论】：