React Native子组件无法获取父组件更新后的状态求助

嗨，我看到你的问题了，核心问题出在直接修改state而没有使用React的setState方法，这也是React新手常踩的坑之一😉

为什么会出现这个问题？ #

React组件的state是受React管理的状态容器，必须通过setState()方法来更新状态。直接赋值this.state = {...}不会触发组件的重新渲染流程，所以你的RootStack组件不会接收到更新后的screenProps，HomePage自然只能拿到初始的token值。

具体修改步骤 #

1. 修复App.js中的状态更新逻辑

把你updateState方法里直接赋值this.state的代码，替换成setState：

updateState = async(u,p) => {
  try {
    let token = await this.getToken(u,p);
    let merchantInfo = await this.getMerchantInfo(token);
    // 改用setState更新状态，并且在回调中打印最新状态（因为setState是异步的）
    this.setState({ token: token, merchantInfo }, () => {
      console.log(this.state)
      console.log('our token state is '+ this.state.token)
      console.log("our merchantinfo state is "+this.state.merchantInfo.name)
    })
  } catch (error) {console.log(error);}
}

这里要注意：setState是异步操作，所以如果要在状态更新后立即执行逻辑（比如打印状态），必须放在setState的第二个回调参数里，否则同步打印可能拿到的还是旧状态。

2. （可选）在HomePage中监听props变化

如果你需要在HomePage中实时响应token的变化，可以使用componentDidUpdate生命周期方法（componentWillReceiveProps已经被React废弃，不推荐使用）：

export default class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {isReady: false};
    console.log ('HomePage initial token: ' + this.props.screenProps.token)
  }

  // 监听props变化
  componentDidUpdate(prevProps) {
    // 对比前后props中的token，只有变化时才执行逻辑
    if (prevProps.screenProps.token !== this.props.screenProps.token) {
      console.log('HomePage updated token: ' + this.props.screenProps.token)
      // 这里可以添加token更新后的业务逻辑，比如重新加载数据等
    }
  }

  render() {
    // ... 原render代码不变
  }
}

验证效果 #

修改完成后，当你在登录页成功获取到JWT并调用updateState后，App组件会触发重新渲染，RootStack会接收到更新后的screenProps，HomePage就能拿到最新的token值了。

内容的提问来源于stack exchange，提问作者lx93