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

Question

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

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

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

  }

我通过 {this.props.navigation.state.weapon} 在第二个屏幕上调用它，但状态似乎没有更新到 M16，直到我返回并再次单击该按钮。

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

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

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

Answer 1

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

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

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

}

Answer 2

State

应该用作处理组件内少量数据的助手。当其所属的组件完全卸载时，状态生命周期结束。另外，请注意

setState

是一个异步函数，因此您不能依赖 React 来为您处理同步情况。更新你的状态也会使你的组件重新渲染，所以你应该小心使用它，以避免不必要的内存丢失。

如果您只想将数据从一个组件传递到另一个组件，在这种情况下使用导航道具就足够了，就像这样

navigate("Second", {weapon: 'M16'});

。您无需更新状态即可进一步传递此数据。事实上，在导航之前更新状态是没有意义的，因为当前状态本身将在下一个屏幕中丢失。

如果您需要在更多组件之间共享完全相同的 state prop，但情况似乎并非如此，也许您应该考虑使用另一种方法，例如 Redux (https://redux.js.org/)。

我建议您阅读官方文档以获取更多详细信息：

https://reactjs.org/docs/react-component.html#state

https://reactjs.org/docs/state-and-lifecycle.html

希望有帮助

编辑： 根据您在下面提供的信息，例如，如果

weapon

是一个数组，并且您需要在导航之前向其推送新值，则不应使用

setState

，而是尝试以下操作：

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

  navigate("Second", { weapon });

}

希望有帮助

Answer 3

我会给出另一个建议：

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}

我希望这可以帮助你。

Answer 4

我将在这里留下一个我用来解决这个问题的小技巧：

使用函数设置状态并将其分配给“onMouseDown” 然后将导航留给单独的函数并将其分配给“onClick” 状态将在您点击的那一刻更新