时间戳

首页 > 解决方案 > 如何从服务器获取数据，如使用 axios 在 reactjs 中的控制台中给出的

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

问题描述

我已经为我的项目编写了后端代码。在控制台中，我正在获取所有数据，但在获取给定图片中的标记数据时出现问题控制台.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

标签： reactjsapiaxiosfrontend

解决方案

result.datafrom axios 包含整个响应。

您可能希望将数据中的结果设置为状态

尝试这个

this.setState({ data: res.data.results, loding: false });

推荐阅读