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

Posted 2023-02-22

【中文标题】React Native this.setState() 仅在再次与组件交互后重新渲染

【英文标题】：React Native this.setState() only re-renders after interacting with the component again

【发布时间】：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() 函数是一个道具，它在得到用户的响应后隐藏模式重复弹出。事实证明，问题在于出于某种原因使用调试模式，因此将其关闭会使应用程序像往常一样工作。

【参考方案1】：

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

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

【讨论】：

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