React Native组件为何在this.setState完成前渲染？如何解决？

首先，你的核心问题在于Redux状态更新的异步性，以及对await this.props.getRoom(roomName)的作用误解——await只能等待getRoom这个action creator返回的Promise（如果你的thunk确实返回Promise的话），但Redux store的状态更新是异步的，并不会被这个await直接捕获。所以当你在componentDidMount里执行this.setState({ room: this.props.room })时，Redux的room状态可能还没完成更新，此时this.props.room还是初始的空对象{}，自然同步到state后也看不到数据。而之后Redux状态更新完成，组件会重新渲染，这时候this.props.room才有数据，所以你在render里的console.log能看到，但state已经是旧值了。

解决方案一：直接使用Redux Props（推荐） #

既然Redux已经帮你管理了room的状态，完全没必要再把它同步到组件本地state里，直接在render中使用this.props.room即可，这样能保证数据始终是最新的，也避免了状态同步的问题。

修改后的render部分关键代码：

<View>
  <Text>Room name: {this.props.room.name}</Text>
</View>
<View>
  <Text>This room was created by: {this.props.room.owner}</Text>
</View>
<View>
  <Text>What are we deciding? {this.props.room.prompt}</Text>
</View>

解决方案二：通过componentDidUpdate同步状态（如果非要用本地state） #

如果你确实需要把props同步到本地state，应该在componentDidUpdate中监听props.room的变化，当它更新时再设置state：

componentDidUpdate(prevProps) {
  // 当props.room发生变化时，更新本地state
  if (prevProps.room !== this.props.room) {
    this.setState({ room: this.props.room });
  }
}

同时，componentDidMount里可以保留await this.props.getRoom(roomName)，但不需要再在这里setState了，因为后续props更新会触发componentDidUpdate来同步。

额外的代码问题修正 #

我还注意到你代码里的几个小问题，可能会导致其他bug：

• TextInput的value属性绑定的是this.state.createRoomName，但你的state里并没有这个属性，应该改成this.state.userIdea；
• constructor里的state是currentUserIdea，但handleIdeaSubmit和TextInput里用的是userIdea，命名不一致，建议统一成userIdea；
• handleIdeaSubmit里调用this.props.submitIdea(user, this.state.userIdea, roomName)，要确保this.state.userIdea是正确的状态字段。

修正后的constructor和TextInput部分：

constructor(props) {
  super(props)
  this.state = {
    currentUser: '',
    submittedIdea: false,
    userIdea: '', // 统一命名
    roomName: '',
    ownerName: '',
    peopleAndIdeas: [],
    prompt: '',
    room: {}
  }
  this.handleIdeaSubmit = this.handleIdeaSubmit.bind(this)
}

// ...

<TextInput
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
  onChangeText={(text) => this.setState({ userIdea: text })}
  value={this.state.userIdea} // 修正绑定的state字段
  placeholder="Enter your idea."
/>

关于“阻止组件渲染”的问题 #

其实不需要阻止组件渲染，React的设计就是让组件根据状态变化重新渲染。你可以在render里做条件渲染，比如当this.props.room还没加载完成时，显示加载提示：

render() {
  // 如果room还没加载完成，显示加载状态
  if (!this.props.room.name) {
    return (
      <View style={styles.container}>
        <Text>Loading room data...</Text>
      </View>
    );
  }

  // 正常渲染内容
  return (
    // ... 你的原有代码
  );
}

这样用户体验会更好，也避免了渲染空数据的问题。

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