React Native this.setState() 仅在再次与组件交互后重新渲染答案

【问题标题】：React Native this.setState() only re-renders after interacting with the component againReact Native this.setState() 仅在再次与组件交互后重新渲染
【发布时间】：2021-08-04 06:33:29
【问题描述】：

通常在使用 this.setState() 时，组件会在通过 setState() 更新状态后重新渲染。不幸的是，我遇到了状态更新但组件在再次与组件交互（即再次单击组件）之前不会重新渲染的问题。这是我的代码：

  constructor(props) {
    super(props);
    this.state = {
      value: new Date(),
      time: 0,
      displayTime: null,
      show: false,
    };
    this.showTimePicker = this.showTimePicker.bind(this);
  }

  showTimePicker() {
    console.log(this.state.show);
    this.setState({show: true}, () => console.log(this.state.show));
    //console.log to verify state changes
  }


render() {
 return(
  <View>
  //code that determines if the datetimepicker modal shows up
  {this.state.show && (
     <DateTimePicker
        value={this.state.value}
        mode="time"
        display="spinner"
        onChange={(date, value) => {
           console.log(value, 'value');
           this.setTime(value);
           setShow(this.state.show);
        }}
      />
   )}
   
   //when button is pressed this.state.show changes to true
   <Button title="Change Time" onPress={this.showTimePicker}></Button>
   </View>
);}

所以我想要的是每次按下按钮时都显示 DateTimePicker 模式。目前发生的情况是，当我按下按钮时，没有任何记录（状态仍然改变），直到我再次单击屏幕（然后显示模式）。我怎样才能让按钮使模态立即弹出？

【问题讨论】：

你能试试这个吗？：{this.state.show ? ( { console.log(value, 'value'); this.setTime(value) ; setShow(this.state.show); }} />) : null }
我刚试了下，问题依旧。
@JerryZhou 你能解释一下你想通过在 DateTimePicker 中的 onChange 属性中添加 this.setTime(value); setShow(this.state.show); 来实现什么吗？我没有看到您的完整代码，但您分享的信息对我来说似乎不正确。
对不起，我没有显示 setTime() 函数是我的错。我认为代码与问题无关。本质上，setTime() 更改屏幕上的文本组件以显示来自模式的更新时间。 setShow() 函数是一个道具，它在得到用户的响应后隐藏模式重复弹出。事实证明，问题在于出于某种原因使用调试模式，因此将其关闭会使应用程序像往常一样工作。

标签： reactjs react-native setstate rerender

【解决方案1】：

我在debug mode 中使用应用程序时遇到了同样的问题，所以可以禁用调试模式，它应该可以正常工作。

这是类似的问题：UI doesn't update until tap on the screen when setState is called inside a realm listener callback

【讨论】：

非常感谢您回答这个问题！原来我只需要这个修复。