Как я могу отображать данные API один за другим на основе идентификатора в реаги js.? - PullRequest
Новая
       24

Как я могу отображать данные API один за другим на основе идентификатора в реаги js.?

0 голосов
/ 13 января 2020

Итак, в основном я пытаюсь получить данные из API с помощью топора ios получать один за другим, например, Q1, как вас зовут (пользователь отвечает на него и затем нажимает далее) Next Q2, какое у вас хобби (пользователь отвечает на него и затем щелкает далее), чем Q3,4,5,6 et c Я хочу отобразить ограниченный объем данных из API, который состоит из массива из 63 вопросов. Я хочу создать вопросник, где вопросы отображаются после пользователь отвечает на предыдущий. Here you can see my apis containing data

Мой код 

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;

Ответы [ 3 ]

1 голос
/ 13 января 2020

Выбирайте элементы один за другим и устанавливайте их как 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;
1 голос
/ 13 января 2020

Сохраните индекс в вашем штате: 

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>
0 голосов
/ 14 января 2020

Вот мое рабочее решение с использованием JavaScript Генераторов 

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;
...