Question

因此，我有一些代码试图将包含测验问题和答案的列表放入状态变量中。这些div的一部分还检查其他状态元素（例如选中状态）。

    render() {

        for (const [index, value] of this.props.quiz.entries()) {
            this.state.quizItems.push(
                <div className="questions">
                    {value.answers.map((answers, index) => (<h3 key={index}
                                                                onClick={() => this.selectItem(index)}
                                                                className={this.state.selected === index ? 'selected btn' : 'btn'}>{answers}</h3>))
                    }
                </div>)
        }
        return (
            <div className="modal-window ">
                {this.state.quizItems[this.state.currentQuizItem]}
            </div>
        )
    };

但是我的问题是我不知道将其放置在组件中的位置-我无法将其保留在上述的render（）方法中，因为您无法从那里更新状态，否则会收到关于递归状态更新。

因此，我尝试将其放入ComponentDidMount（）中，但是对state.selected的检查不起作用，因为生命周期的这一部分不会在状态更新中被调用。

我可以在哪里移动以上代码，以便可以在组件开始时使用div更新状态，同时允许检查状态？

Answer 1

您可以将逻辑封装在组件中的某处（可能是一种方法），然后在需要进行渲染时调用该方法：

class ... {

  // Other methods...

  renderCurrentQuizItem() {
    const quizEntries = this.props.quiz.entries();
    const currentQuizEntry = quizEntries[this.state.currentQuizItem];
    const [_, value] = currentQuizEntry;
    return (
      <div className="questions">
        {value.answers.map((answers, index) => (<h3 key={index}
          onClick={() => this.selectItem(index)}
          className={this.state.selected === index ? 'selected btn' : 'btn'}>{answers}</h3>))
        }
      </div>);
  }

  render() {
    return (
      <div className="modal-window ">
        {this.renderCurrentQuizItem()}
      </div>
    )
  }
}

请注意，renderCurrentQuizItem方法不会处理所有测验条目（将它们映射到div中），然后仅选择其中一个进行渲染，就像在发布的render方法中一样进行渲染需要呈现的条目（由this.state.currentQuizItem标识），我认为这更干净。不过，您仍然可以采用另一种方法，具体取决于您需要它的工作方式。

React-代码在Render或ComponentDidMount中不起作用

1 个答案: