如何使用axios从服务器获取数据,如reactjs控制台中给出的

时间:2020-10-31 03:53:38

标签: reactjs api axios frontend

我已经为我的项目编写了后端代码。在控制台中,我正在获取所有数据,但是在给定图片consle.png

中获取那些标记的数据存在问题

我试图按照下面的代码获取数据。我的问题是这种获取数据的正确方法,或者如果我做错方法时做错了方法,那么正确的方法是什么? 下面是我的代码

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
          data: [],
          loading: false,
          error: null,
        };
      }
    
      componentDidMount() {
        this.setState({ loding: true });
        const token = getTokenu();
        Axios.get('http://127.0.0.1:8000/api/article/', {
          headers: {
            Authorization: "Token " + token,
          },
        })
          .then((res) => {
            console.log(res.data);
            this.setState({ data: res.data, loding: false });
          })
          .catch((error) => {
            this.setState({ error: error, loading: false });
          });
      }
    
      render() {
        const { data, error, loading } = this.state;
        return (
          <div className="mt-4">
                    {loading && <ClipLoader size={30} color={"#f3990f"} />}
            <Carousel
              infiniteLoop={true}
              showThumbs={false}
              showIndicators={false}
              autoPlay={true}
              >
                {data.map((item) => {
                  return (
                    <div key={item.id}>
                      <img className="articleposter" src={item.articledetail_set.poster} alt="tag" />
                      <p>{item.articledetail_set[index].date}</p>
                      <p>{item.articledetail_set[index].minutes}</p>
                      <p>{item.articledetail_set[index].seconds}</p>
                    </div>
                  )
                } )}
            </Carousel>
          </div>
        );
      }
}

export default Example

1 个答案:

答案 0 :(得分:1)

来自axios的

function mergeGetters<A, B>(a: A, b: B): A & B { const result = Object.defineProperties( {}, { ...Object.getOwnPropertyDescriptors(a), ...Object.getOwnPropertyDescriptors(b), } ); return result; } 包含整个响应。

您可能希望将数据中的结果转换为状态

尝试

result.data