Question

此组件的预期行为如下：我按它，调用了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>
 )
}

Answer 1

将 selectedOpacity 更改为箭头功能：

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

然后：

onPress={this.selectedOpacity}

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

Answer 2

我认为您缺少的是selectedOpacity（）的绑定，否则SELECT REGEXP_REPLACE ( REGEXP_SUBSTR ( '1.2.P Permission Level - ${Permission_manager_approval}', 'manager_([[:alnum:]]+\.?){3,4}/?'), '^(\S*)', 'Manager_approval') FROM DUAL;在AFAIK中将是未定义的。

也最好将状态分配移到构造函数（）。

String No = "00098000002208";

也更改为以下内容，因为creating an arrow function inside render affects performance。

this

Answer 3

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

React Native setState不重新渲染

3 个答案: