React Native setState 不重新渲染答案

【问题标题】：React Native setState not re-renderingReact Native setState 不重新渲染
【发布时间】：2023-09-24 17:47:02
【问题描述】：

这个组件的预期行为是这样的：我按下它，selectedOpacity() 函数被调用，状态被更新，所以它现在以 opacity=1 呈现。

但由于某种原因，在调用 this.setState 之后，它并没有被重新渲染。我必须再次单击此组件以使其重新渲染并应用状态的不透明度更改。

export default class Category extends Component {

state = {
  opacity: 0.5
}

selectedOpacity() {
  // some stuff
  this.setState({opacity: 1})
}

render() {
 return(
  <TouchableOpacity style={[styles.container, {opacity: this.state.opacity}]} onPress={() => {
    this.selectedOpacity();
  }}>
  </TouchableOpacity>
 )
}

【问题讨论】：

缺少constructor()
Dynamic Opacity not changing when component rerenders in react native的可能重复
所以在这种情况下使用 TouchableOpacity 似乎存在错误，但有什么想法可以避免这个错误并仍然使用 TouchableOpacity？

标签： reactjs react-native state render

【解决方案1】：

尝试将 onpress 更改为 onPress={() => this.selectedOpacity()}

【讨论】：

没什么变化，还是第一次点击没有更新渲染
@leighton onPress={() => this.selectedOpacity()} 与 onPress={this.selectedOpacity} 相同
是的，对不起-我的错

【解决方案2】：

将selectedOpacity改为箭头函数：

selectedOpacity = () => {
  this.setState({opacity: 1})
}

然后：

onPress={this.selectedOpacity}

编辑：react 文档说它是实验性的，语法称为public class field syntax。

【讨论】：

如果未绑定，这将在箭头函数 AFAIK 中未定义。
@KiranMathewMohan 你以前试过吗？我认为你完全错了
是的，当然。 “箭头函数表达式是常规函数表达式的语法紧凑替代方案，尽管它没有自己绑定到 this、arguments、super 或 new.target 关键字。”参考：mdn
@KiranMathewMohan 认真的吗？世界上很多人都在使用箭头函数而不是绑定（ES6）。请阅读这篇文章reactjs.org/docs/handling-events.html
你可以google一下。我不想和你争论。我们可以在这里结束讨论。

【解决方案3】：

我认为您缺少的是 selectedOpacity() 的绑定，否则 this 将在 AFAIK 中未定义。

还可以更好地将状态分配移动到构造函数（）。

constructor(props) {
    super(props);
    this.state = {};
    this.selectedOpacity = this.selectedOpacity.bind(this);
}

因为creating an arrow function inside render affects performance，也改成下面这样。

onPress={this.selectedOpacity}

【讨论】：