如何在 React Native 子组件发生变化时重新渲染父组件？

Question

我有一个呈现另一个组件的组件。当我对子组件进行更改时，我希望重新渲染主组件。

在下面的示例中，onSubmit 来自第二个组件，在主组件上触发 _onSubmit，但 setState 不会重新呈现视图

想法？

class MainLayout extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: 'no',
    };

    this._onSubmit = this._onSubmit.bind(this);
  }

  // this get's triggered by _checkSubmitReady() on the second component
  _onSubmit(data) {
    // this state get's set, but this component is not re-rendered
    // i assume render() should be called here
    this.setState({data: data});
  }

  render() {
    return (
      <View><SecondLayout onSubmit={this._onSubmit}/>{this.state.data}</View>
    );
  }
}


class SecondLayout extends Component {
  constructor(props) {
    super(props);

    this._checkSubmit = this._checkSubmit.bind(this);
  }

  _checkSubmit() {
    this.props.onSubmit('yes');
  }

  // sub component is mounted, call onSubmit() on parent component
  componentDidMount() {
    this._checkSubmit();
  }

  render() {
    return (
      <View><Text>Nothing here</Text></View>
    );
  }
}

Answer 1

尝试：

_onSubmit(data) {
  this.setState({ data: data }, () => {
    this.forceUpdate();
  });
}

或者如果您使用的是 ES5：

_onSubmit(data) {
  this.setState({ data: data }, function () {
    this.forceUpdate();
  }.bind(this));
}

如何在 React Native 子组件发生变化时重新渲染父组件？

How to re-render parent component on change on sub component in react native?

javascript

components

render

react-native