javascript - 第一页打开为空，未加载数据

Question

问题:当我的第一页加载时，页面为空白。

我做了什么:我使用下面看到的代码将数据从 Firebase 传递到 redux。然后我进行 if else 检查。 (作为返回)。问题就在这里。在您单击导航栏部分中的主页链接之前，不会加载第一页。

它应该如何工作:在单击导航栏部分之前需要加载第一页。

<小时/>

App.js

export class App extends Component {
  componentDidMount = () => {
    const dat = []
    axios.get('https://bookstore-61d39.firebaseio.com/books/books.json')
      .then( res => {
        Object.values(res.data).map( val => {
          dat.push(val)
      })
    })
    axios.get('https://bookstore-61d39.firebaseio.com/books.json')
    .then( res => {
      console.log(res.data);
  })
    console.log(dat)
    this.props.onBooksData(dat)
  }

  render() {
    return (
      <BrowserRouter>
        <div>
          <Navbar>
            <GetLink to='/' link='Home'/>
          </Navbar>
          <Switch>
            <Route exact path="/" component={Homepage}/>
            <Route path="/add" component={Add}/>
            <Route path="/admin" component={Admin}/>
            <Route path="/:id" component={BookInfo} />
            <Route component={NotFound} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}
// <GetLink to='/add' link='Add'/>
const mapStateToProps = state => {
  return{
    admin: state.admin
  }
}

const mapDispatchToProps = dispatch => {
  return{
    onBooksData : (booksData) => dispatch({ type: 'BOOKS', books: booksData }),
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App)

<小时/>

homepage.js

class homepage extends Component {
  render() {
    return (
      <div className="container">
        <h2>HOMEPAGE</h2>
        <hr />
        {console.log(this.props)}
        {
          this.props.books
          ?
          this.props.books.map((arr, count) => (
          <Link key={count} to={"/" + count}>
            <div
              className="card m-2"
              style={{
                width: "150px",
                height: "375px",
                float: "left",
                position: "relative"
              }}>
              <img src="https://picsum.photos/400/500" className="card-img-top" />
              <div className="card-body text-center">
                <h5
                  className={styles.Title}
                  style={{ textDecoration: "none" }}
                >
                  {arr.title}
                </h5>
                <p className={styles.Author}>{arr.author}</p>
                <div className={styles.Price}>{arr.price} $</div>
              </div>
            </div>
          </Link>
        ))
        : <div>loading...</div>
        }
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    books: state.books
  };
};

export default connect(mapStateToProps)(homepage);

Answer 1

您需要在数据加载完成后调用 onBooksData 属性，现在您是在 API 调用的 Promise 解析之前调用它。

  componentDidMount = () => {
    const dat = []
    axios.get('https://bookstore-61d39.firebaseio.com/books/books.json')
      .then( res => {
        Object.values(res.data).map( val => {
          dat.push(val)
      })
      // dat is now populated, call `onBooksData`
      this.props.onBooksData(dat)
    })
    // `dat` is not populated yet here since this code runs before the
    // `axios.get` async call completes.
    console.log(dat)
    this.props.onBooksData(dat)
  }

另一种选择是使 componentDidMount 成为一个异步方法，该方法将更加强制地读取:

  // note addition of `async` here
  componentDidMount = async () => {
    const dat = []
    const res = await axios.get('https://bookstore-61d39.firebaseio.com/books/books.json')
    Object.values(res.data).map( val => {
      dat.push(val)
    })
    // dat is now populated, call `onBooksData`
    this.props.onBooksData(dat)
  }