通过状态不变

Question

应用流程：

的ComponentOne：

1. 用手机拍照
2. 将照片发送至api
3. 导航至ComponentTwo

ComponentTwo：

1. 渲染组件
2. 在呈现ComponentTwo之后，现在在ComponentOne中收到来自api的响应。 （导致组件无法显示响应，因为它是在渲染组件后收到的）所需的结果是加载微调器将旋转直到从api收到响应，并在收到时立即将其显示在ComponentTwo中。

我将状态从一个组件传递到另一个组件，状态，称为＃34; loading＆＃34;从＆＃34; true＆＃34;开始并且应该改为＆＃34; false＆＃34;当从api收到响应时，即使它在ComponentOne中发生了变化，ComponentTwo仍会显示微调器......

这就是我导航到第二个屏幕并用它传递状态的方法。

this.props.navigation.navigate('ComponentTwo', {loading: this.state.loading});

这是我接收状态并进行条件渲染的方式，spinner应该显示直到从api收到响应，但是当前它只是在收到数据响应时仍然保持旋转。

{
  this.props.navigation.state.params.loading ?
  <Spinner/> :
  <Text>Display response from api when it is received</Text>
}

为什么这不起作用？为什么状态不会在第二个组件中更改并呈现结果，而是永远保持加载状态。你能否将状态从一个组件传递到另一个组件并期望它能够改变？

编辑：＆＃34; loading＆＃34;被设置为＆＃34; false＆＃34;在从api收到响应之后的ComponentOne中，导航到ComponentTwo之前发生，因此我希望微调器显示直到收到数据。

Edit2：任何人都知道如何使用redux做到这一点？我在项目中有redux但不知道如何处理loading当我的变量得到一个值作为来自api的响应时将被设置为false。

Answer 1

我不太确定，导航参数的工作就像反应状态/道具一样。 这是一条将params传递到下一个屏幕的单行道。这些不会更新。

你应该让一个组件包裹这两个屏幕，使道具向下传递。如果更新包装器组件的状态，则会更新。

Wrapper可能具有照片状态，一旦使用图像url更新它将触发重新渲染，并且道具将逐渐渗透到附加组件。

希望这有帮助。