Как заставить пользовательский интерфейс отображать мое состояние с помощью реакции

Question

У меня есть метод onClick для реагирования, который изменяет состояние свойства с именем указатель. Функция работает на функциональном уровне, однако пользовательский интерфейс не обновляется в соответствии с моим состоянием, если я дважды не щелкну кнопку (метод onClick). Я попытался превратить компонент в компонент класса, чтобы использовать метод рендеринга, но все равно безрезультатно.

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

Вы просто напишите это, но по крайней мере я дам вам объяснение.

Каждое действие над состоянием должно выполняться неизменным образом, в основном это означает, что когда вы вызываете функцию setState, операция, предоставленная для setState, должна возвращать новое значение, а не напрямую изменять состояние.

Пожалуйста, примите это во внимание при последующих операциях, так как это приведет к ужасным побочным эффектам в вашем приложении.

Вы можете прочитать об этом здесь.

Answer 2

Проблема заключалась в том, что мне нужно было поставить "this.state.pointer + 1", а не " this.pointer++ ". Спасибо, icepickle