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'});一样。您不需要更新您的状态，然后可以进一步传递此数据。事实上，在导航之前更新您的状态是没有意义的，因为当前状态本身将在下一个屏幕中丢失。

如果你需要在更多组件之间共享完全相同的状态支架，这似乎并非如此，也许你应该考虑使用另一种方法，如Redux（https://redux.js.org/）。

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

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

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

希望有所帮助

编辑：根据您在下面提供的信息，例如，如果weapon是一个数组，并且您需要在导航之前将新值推送到该数组，则不应使用setState，请尝试此操作：< / p>

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中第一次单击时同时更改screen和setState

3 个答案: