以您的状态存储索引：

state = {
    items: [],index: 0
};

在按钮的onClick函数的setState中，假设您有一个按钮可以存储用户的答案，请在行index: this.state.index + 1内添加行。

在render内将index存储到变量：const index = this.state.index;

而不是使用.map来呈现这样的问题：

<ul>
  <li key={items[index].id}>
    {items[index].pqDetail}
  </li>
</ul>

一个接一个地选择项目，并将其设置为currentItem，然后将currentItem呈现为视图。

mport React,{ Component } from 'react';
import Axios from 'axios'
import ReactDOM from "react-dom";

class Questionare extends Component {
  state = {
    items: [],currentItem: null,index: 0
  };


componentDidMount() {
  Axios.get('http://leaty-dev.azurewebsites.net/api/services/app/PersonalityQuestioner/GetAllPersonalityQuestioner')
  .then(response => {
      console.log(response);
      this.setState({ items: response.data.result.items,currentItem: response.data.result.items[0],index: 0 });
  })
  .catch(error => {
    console.log(error);
  });
}

handleNext = () => {
    const { index,items } = this.state;
    const nextQuestion = index + 1;

    this.setState({ currentItem: items[nextQuestion],index: nextQuestion });
}

    render() { 
      const { currentItem } = this.state;
       return (
        <div>
          <button className="btn" onClick={this.handleNext}>Next</button>
          <ul>
          <li key={currentItem.personalityQuestionerCategory.id}>{currentItem.pqDetail}</li>
          </ul>
          </div>
       )
    }

}

export default Questionare;

这是我使用JavaScript Generators

import React,{ Component,Fragment } from "react";
import Axios from "axios";

class Questionare extends Component {
  item = this.itemGenerator();
  state = {
    items: [],currentItem: "Click to get a series of question one after another"
  };

  componentDidMount() {
    Axios.get(
      "http://leaty-dev.azurewebsites.net/api/services/app/PersonalityQuestioner/GetAllPersonalityQuestioner"
    )
      .then(({ data: { result: { items } } }) => this.setState({ items }))
      .catch(error => console.log(error));
  }

  *itemGenerator() {
    const { items } = this.state;
    for (let i = 0; i < items.length; i++) {
      const item = items[i].pqDetail;
      yield item;
    }
  }

  handleButtonClick = () => {
    const currentItem = this.item.next().value;
    this.setState({ currentItem });
  };

  render() {
    const { currentItem } = this.state;

    return (
      <div>
        <button className="btn" onClick={this.handleButtonClick} 
        disabled={!currentItem}>
          Click
        </button>
        {currentItem && <Fragment>{currentItem}</Fragment>}
        {!currentItem && <Fragment>No Questions Available</Fragment>}
      </div>
    );
  }
}

export default Questionare;