Javascript 如何在React Native中第一次单击时同时更改屏幕和设置状态

我有一个功能，可以改变屏幕，同时设置状态，如下所示：武器初始状态为空：

var { navigate } = this.props.navigation;
  clickM16 = () => {
      this.setState({
        weapon: "M16"
      });

      navigate("Second", {weapon: this.state.weapon});

  }

我通过{this.props.navigation.state.wearm}在我的第二个屏幕上调用它，但是在我返回并再次单击按钮之前，状态似乎不会更新到M16

我将控制台记录在setState函数的上方和下方，在第一次单击时，它总是给我null，但当我返回并再次单击它时，它会给我M16

我不能在屏幕之间导航的同时运行setState吗？如果可以，我做错了什么

---

TLDR：我试图在同一个函数中设置状态和更改页面，这样我就可以在新页面上以文本的形式显示新状态。状态更改直到第二次单击按钮时才会发生。

尝试为导航设置一个小的超时。点击导航指令时，状态更改可能未完成

var { navigate } = this.props.navigation;
 clickM16 = () => {
  this.setState({
    weapon: "M16"
  });

  setTimeout(() => navigate("Second", {weapon: this.state.weapon}),20);

}

状态应该用作帮助器来处理组件内部的少量数据。当所属组件完全卸载时，状态生命周期结束。另外，请注意setState是一个异步函数，所以您不能依赖React来处理同步情况。更新您的状态也会使您的组件重新加载，所以您应该小心使用它以避免不必要的内存丢失

如果您只想将数据从一个组件传递到另一个组件，在这种情况下，使用导航道具就足够了，就像下面的navigateSecond，{wearm:'M16'}；。您不需要更新您的状态就可以进一步传递此数据。事实上，在导航之前更新状态是没有意义的，因为当前状态本身将在下一个屏幕中丢失

如果你需要在更多的组件之间共享完全相同的状态支撑，这似乎不是事实，也许你应该考虑使用另一种方法，比如ReDux.< 我建议您阅读官方文件以了解更多详细信息：

希望能有帮助

编辑： 根据您在下面提供的信息，例如，如果武器将是一个数组，并且您需要在导航之前向其推送一个新值，则不应使用setState，请尝试以下操作：

const { navigate } = this.props.navigation;
clickM16 = () => {
  const { weapon } = this.state;
  weapon.push('M16');

  navigate("Second", { weapon });

}

---

希望能有所帮助

我将给出另一个建议：

var { navigate } = this.props.navigation;
  clickM16 = () => {
      this.setState({
        weapon: "M16"
      });
let sendPara = this.state.weapon
      navigate("Second", {weapon: sendPara});

  }

各组件中的接收参数

catName={this.props.navigation.state.params.sendPara}

---

我希望这可能会对您有所帮助。

我必须更新它，因为有多个武器将在第二个屏幕上根据其单击的武器状态进行渲染。谢谢你的尝试，我不知道redux，但我会仔细阅读。我的问题已经得到了回答。我认为这仍然是一个反模式的解决方案。如果需要修改状态中已有的任何数据，然后进一步传递此道具，也不需要使用setState。您可以访问所需的道具，将其作为变量更新，然后进一步传递它。正如我提到的，每个setState都会再次触发render方法。通过使用timeout，您不仅延迟了用户体验，而且还消耗了应用程序不必要的资源。因此，通过您提供的代码，您只为prop武器分配了一个字符串值，因此下一个屏幕依赖于值本身，而不是状态。我建议你看看我提到的链接。希望它有帮助我还没有部署API，字符串只是为了测试。但是是的，也许redux会有帮助。我用另一种方法编辑了答案。在导航之前设置状态不是一个好模式。希望它更好，setState将回调作为第二个参数，在设置状态后调用，这比超时更优雅和安全。