[英]How do I get the UI to render with my state with react
我有一个 onClick 方法来做出反应,它改变了名为指针的属性的 state。 function 在功能级别上工作,但是 UI 不会随着我的 state 更新,除非我双击按钮(onClick 方法)。 我尝试将组件转换为 class 组件以利用渲染方法,但仍然没有结果。
let questions = [
{
id: 1,
title: "This person tends to be quiet"
},
{
id: 2,
title: "This person is compassionate and has a soft heart."
},
{
id: 3,
title: "This person is disorganized.."
}
]
export default class Quiz extends React.Component {
constructor() {
super();
this.state = {
pointer: 0,
currentAnswer: ""
};
}
render() {
return (
<div>
<h1> {questions[this.state.pointer].title}</h1>
<button onClick={(e) => {
e.preventDefault();
this.setState({
pointer: this.pointer++
});
console.log(this.pointer);
this.forceUpdate();
}}>
</div>
)
}
问题是我需要输入“this.state.pointer + 1”而不是“this.pointer++”。谢谢,icepickle
你只是写它,但至少我会给你一个解释。
State 上的每个操作都必须以不可变的方式执行,基本上这意味着当您调用 setState function 时,提供给 setState 的操作必须返回一个新值,而不是直接更改 Z9ED39E2EA691586B6EZEF85。
请在以后的操作中考虑到这一点,因为它会给您的应用程序带来可怕的副作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.