如何在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

构造函数只调用一次，不应包含任何副作用或视图计算。每次状态更改render()函数都会被调用，因此您最好将answers放在那里。关于currentQ，代码并不完全清楚，但可能它应该是状态的一部分。如果它改变很多，组件视图依赖于它，它可能是。要更好地决定组件状态应该是什么，请参阅Thinking in React 以下是Dan Abramov

的反应组件生命周期图

Answer 2

根据提供的有限代码，似乎@balabis想要根据状态变化计算一些类成员。所以componentDidUpdate生命周期方法是一个很好的做法。

代码

componentDidUpdate(prevProps, prevState){
  this.currentQ = data[this.state.index]
  this.answers = Object.values(this.currentQ.answers).map((item, index) => {
    return <button onClick={() => this.onItemClick(index)}>{item}</button>
  })
}

注意：初始渲染不会调用componentDidUpdate。更多 - https://reactjs.org/docs/react-component.html#componentdidupdate

Answer 3

尝试使用 componentShouldMount（）{} 功能并尝试在此更新。即使我遇到同样的问题，但这种方式对我有用。并且不要直接设置值，使用 setState（） - 我工作 Mobx 。