无法使用带有 react.js 和 axios 的 map 循环遍历数组

Question

我正在从 API 获取数据，我在 console.log(this.state.reviews) 中获取了所有数据，但在地图循环完成后我无法访问数据。

品牌数据是可访问的，唯一的问题是地图循环（评论数组）

我知道它与异步调用有关！我找到了这个Can't access values for Axios calls in map loop 有谁知道如何使用下面的代码来调整它;-)

class App extends React.Component {

constructor(props){
    super(props);
    this.state = {
        reviews : []
    };
}

componentDidMount() {
    axios.get(`https://api.prime.com/businesses/reviews/${this.props.BrandId}`)
    .then((res) => {
        const brand = res.data;
        this.setState({
            // Reviews data
            reviews : brand.reviews.items,
            // Brand data
            logo   : brand.business.logo,
            name   : brand.business.name,
            voters : brand.business.voters,
            url    : brand.business.url
        });
    })
}
    render() {
    console.log(this.state.reviews);
    return (
            <div className="widget-wrapper">

                    <OwlCarousel className="reviews-container"
                        loop
                        nav
                        margin={12}
                        dots={false}
                        items={5}
                        autoplay={true}
                    >
                        {this.state.reviews.map((review) => {
                            <div key={review.id} className="review-item">
                                <a href={this.state.url + '/' + review.slug} target="_blank" rel="nofollow">
                                    <div className="review-heading">{review.subject}</div>
                                    <div className="review-content">{review.message}</div>
                                </a>
                            </div>
                        })}
                    </OwlCarousel>

            </div>
    )
}
}

Answer 1

我发现你的问题你需要等待承诺解决为什么你的状态没有设置为这样做你可以使用async await like

    import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    this.loadData();
  }
  loadData = async () => {
    const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
    if (res) {
      const posts = res.data;
      this.setState({
        posts: [...posts]
      });
    }
  };
  renderPost = () => {
    return this.state.posts
      ? this.state.posts.map(data => (
          <div style={{ color: "black" }}>
            <h5>{data.title}</h5>
            <p>{data.body}</p>
          </div>
        ))
      : "loading...";
  };
  render() {
    console.log(this.state.posts);
    return <div> {this.renderPost()}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

完整的应用在这里查看：codesandbox