我如何在反应js中根据id一个接一个地显示api的数据？

Question

所以基本上我想做的是使用 axios 从 api 获取数据一个接一个，例如 Q1 你的名字是什么（用户回答然后点击下一步）下一个 Q2 你的名字是什么爱好（用户回答然后点击下一步）比 Q3、4、5、6 等我想显示来自 api 的有限数量的数据，它由 63 questions.I 的数组组成想要建立一个问题在用户回答上一个问题后显示问题的位置。

我的代码是

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

class Questionare extends Component {
  state = {
    items: []
  };


componentDidMount() {
  Axios.get('http://leaty-dev.azurewebsites.net/')
  .then(response => {
      console.log(response);
      this.setState({ items: response.data.result.items });
  })
  .catch(error => {
    console.log(error);
  });
}

    render() { 
      const { items } = this.state;
       return (
        <div>
          <button className="btn" >Click</button>
          <ul>
            {items.map(item => (
          <li key={item.id}>{item.pqDetail}</li>
        ))}
          </ul>
          </div>
       )
    }

}

export default Questionare;

Answer 1

在您所在的州存储索引：

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>

Answer 2

一个接一个地选择项目并设置为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;

Answer 3

这是我使用 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;

我如何在反应js中根据id一个接一个地显示api的数据？

How can i display data of an api one after another on the basis of id in react js.?

javascript

arrays

reactjs

es6-promise

axios