如何在第一次单击 React Native 时同时更改屏幕和 setState

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。

我可以不运行在屏幕之间导航的同时设置状态吗？如果我可以我做错了什么。

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}

希望对您有所帮助。

如何在第一次单击 React Native 时同时更改屏幕和 setState

How to change screen and setState at the same time on first click in React Native

javascript

ios

npm

react-native

stack-navigator