嵌套组件状态控制

Question

我在一个屏幕上有一个叠加层/模态，它位于我想控制的父容器下：

1. 在加载时，可见性为假
2. 当用户在屏幕/容器组件上执行操作时，将显示叠加层。
3. 用户可以通过点击叠加层外部的区域（onBackdropPress）来关闭叠加层
4. 叠加层中的数据由父容器（通过状态）提供。

我应该在屏幕组件中生成一个状态并为其分配道具吗？

class Screen extends Component {
  state = { visible: this.props.visible, data: this.props.data }
  render () {
    return (<Overlay isVisible={this.state.visible} onBackdropPress={this.setState({visible: false})}><Text>{data}</Text></Overlay>)
  }
}

如何通过设置Screen组件中的状态来解决父容器的状态尚未更新的问题？

即使在屏幕组件中，可见性在父容器中仍设置为true。

<Screen visible={this.state.visible} data={this.state.data}>