时间戳

首页 > 解决方案 > react js中如何根据id依次显示一个api的数据？

javascript - react js中如何根据id依次显示一个api的数据？

问题描述

所以基本上我想要做的是使用 axios 从一个 api 获取数据，例如 Q1 你的名字是什么（用户回答它然后单击下一步） Next Q2 你的爱好是什么（用户回答它然后单击下一步) 比 Q3、4、5、6 等我想显示来自 api 的有限数量的数据，该 api 由 63 个问题组成。我想建立一个问题，在用户回答前一个问题后显示问题。在这里你可以看到我的 apis 包含数据

我的代码是

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;

标签： javascriptarraysreactjsaxioses6-promise

解决方案

在您的状态中存储索引：

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>

推荐阅读