javascript - 在reactJS中使用setState重新渲染时如何调用其他构造函数？

Question

我在组件中有这些构造函数。 这里的想法是让按钮具有 onClick 属性，当单击按钮时， onItemClick() 函数会调用，如果单击右键，则 this.state.index 增加 1。

这里的问题是状态发生变化，但其他构造函数不会再次被调用，因此组件中没有任何变化。

问题是每次状态改变时如何调用这些构造函数？或者我应该如何重写代码，以便保留其背后的逻辑，这意味着随着每次状态更改，我都会获得取决于状态的所有新信息？

constructor() {
    super()
    this.state = {
      index: 1,
    }
    this.currentQ = data[this.state.index]
    this.answers = Object.values(this.currentQ.answers).map((item, index) => {
      return <button onClick={() => this.onItemClick(index)}>{item}</button>
    })
  }

编辑:提供下面组件的完整代码。谢谢您的解答!

import React, { Component } from 'react';
import {data} from './input.js';


class Card extends Component {
  constructor() {
    super()
    this.state = {
      index: 1,
    }
    this.currentQ = data[this.state.index]
    this.answers = Object.values(this.currentQ.answers).map((item, index) => {
      return <button onClick={() => this.onItemClick(index)}>{item}</button>
    })
  }

  onItemClick = (index) => {
    let rightAnswer = this.currentQ.rightAnswer
    let userGuess = Object.keys(this.currentQ.answers)[index]

    rightAnswer === userGuess ? this.setState({index: this.state.index += 1}) : console.log('false')
  }

  render() {
    return (
      <div>
        <h2>{this.currentQ.engWord}</h2>
        {this.answers}
      </div>
    )
  }
}
export default Card;

Answer 1

构造函数仅调用一次，并且不应包含任何副作用或 View 计算。每次状态更改时都会调用 render() 函数，因此您最好将答案放在那里。关于currentQ，从代码中并不完全清楚，但也许它应该是状态的一部分。如果它变化很大并且组件 View 依赖于它，那么它可能是这样。要更好地决定组件状态应包含哪些内容，请参阅 Thinking in React .
这是 Dan Abramov 绘制的 React 组件生命周期的精彩图表