如何使用我的 state 渲染 UI 並做出反應

Question

我有一個 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>
)
}

Answer 1

問題是我需要輸入“this.state.pointer + 1”而不是“this.pointer++”。謝謝，icepickle

Answer 2

你只是寫它，但至少我會給你一個解釋。

State 上的每個操作都必須以不可變的方式執行，基本上這意味着當您調用 setState function 時，提供給 setState 的操作必須返回一個新值，而不是直接更改 Z9ED39E2EA691586B6EZEF85。

請在以后的操作中考慮到這一點，因為它會給您的應用程序帶來可怕的副作用。

你可以在這里讀到它。