Question

我有一个包含30个问题的数组，我需要一次显示一个问题，以便学生选择答案。

我正在考虑在componentDidMount中创建带有问题0的“ currentQuestion”，而当学生单击下一步时，我在计数器中加1并将状态“ currentQuestion”更改为下一个？

我想知道是否有更好的解决方案，或者这是个好主意？

编辑1：

我尚未开始构建，因为我不知道我的主意是否很好，但是在这种情况下，我要显示30个问题，我想找到一种方法一次显示一个问题，并在用户单击按钮。

    render () {
    return (
        <div>
            {this.state.questions.map(item => (
                <p key={item.id}>
                    {item.component[0].content}
                </p>
            ))}
        </div>

    )
}

Answer 1

我正在考虑在componentDidMount中创建带有问题0的“ currentQuestion”

我猜您想以组件状态存储currentQuestion吗？

如果是这样，您可以在构造函数中将其初始化，如下所示：

class Quizz extends Component {
  constructor() {
    super();

    this.state = {
      currentQuestion: 0
    }
  }
}

对于其余部分，我认为您有正确的主意。

您最终将得到一个如下所示的组件：

class Quizz extends Component {
  constructor() {
    super();

    this.state = {
      questions: [],
      currentQuestion: 0
    }

    this.nextQuestion = this.nextQuestion.bind(this)
  }

  componentDidMount() {
    fetchQuestions().then(questions => this.setState({ questions }))
  }

  nextQuestion() {
    this.setState(prevState => ({
      currentQuestion: prevState.currentQuestion + 1
    }))
  }

  render() {
    if (!this.state.questions.length) return <div>Loading…</div>        

    return (
      <div>
        <p>{this.state.questions[this.state.currentQuestion].content}</p>
        <button onClick={this.nextQuestion}>Next</button>
      </div>
    )
  }
}

Answer 2

有很多方法可以实现您想要的。由于您必须等待学生回答问题，因此无需遍历问题数组。您可以执行以下操作。

class QuestionsComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            questions: [
                'question_1',
                'question_2',
                'question_3',
                'question_4',
                'question_5',
            ],
            numberOfAnswers: 0,
        };
    }

    onAnswer = () => {
        this.setState({ numberOfAnswers: this.state.numberOfAnswers + 1 });
    }

    render = () => {
        return (
            <div className='CarouselTimer'>
                { this.state.questions[this.state.numberOfAnswers] }

                <button onClick={ this.onAnswer }>ANSWER</button>
            </div>
        )
    }
}

让我知道这是否是您想要的。

React-一次显示一个数组值，然后单击更改

2 个答案: