javascript - 如何通过反应让 UI 以我的状态呈现

Question

我有一个 onClick 方法来做出反应，它改变了一个名为指针的属性的状态。该功能在功能级别上工作，但是除非我双击按钮（onClick 方法），否则 UI 不会随我的状态更新。我尝试将组件转换为类组件以利用渲染方法，但仍然没有结果。

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>
)
}

Answer 1

问题是我需要输入“this.state.pointer + 1”而不是“this.pointer++”。谢谢，icepickle

Answer 2

你只是写它，但至少我会给你一个解释。

State 上的每个操作都必须以不可变的方式执行，基本上这意味着当您调用 setState 函数时，提供给 setState 的操作必须返回一个新值，而不是直接更改状态。

请在以后的操作中考虑到这一点，因为它会给您的应用程序带来可怕的副作用。

你可以在这里读到它。