React和Axios触发两次（一次是未定义的，一次成功）

Question

根据React AJAX示例，我创建了一个JSX文件，其目的是获取并呈现电影。就我所知，我在这里做得一切都是正确的。

当我在我的render函数中使用console.log打印数据时，会得到两个结果：

• 未定义
• 对象（这是我需要的，所以这个完美）

如何过滤掉未定义的行而不在我的render函数中执行一些if / else逻辑？迭代结果当然会导致错误第一次，这将使我的应用程序崩溃。

处理这个问题的最佳方法是什么？

编辑：也许应用程序在Axios调用完成之前被呈现，在这种情况下，我被迫执行if / else语句？

这是我的JSX文件：

import React from "react";
import axios from "axios";

export default class NetflixHero extends React.Component {
 constructor() {
    super();
    this.state = {
      movie: []
    }
 }
}

componentDidMount() {
  const apiKey = 'xxxxxxxx';
  let requestUrl = 'https://api.themoviedb.org/3/' + this.props.apiAction + '&api_key=' + apiKey;
  axios.get(requestUrl).then(response => {
      this.setState({movie: response.data.results})
  });
}

render() {
  //Fires twice. Returns Undefined and an Object
  console.log(this.state.movie[0]);
  return(
   <div></div>
  )
}

- Michael Koelewijn

---

感谢您提供 API-Key。;) - Page not found

Answer 1

在渲染方法内检查状态。使用这种方法，您可以渲染加载屏幕：

import React from "react";
import axios from "axios";

export default class NetflixHero extends React.Component {
 constructor() {
    super();
    this.state = {
      movie: []
    }
 }
}

componentDidMount() {
  const apiKey = '87dfa1c669eea853da609d4968d294be';
  let requestUrl = 'https://api.themoviedb.org/3/' + this.props.apiAction + '&api_key=' + apiKey;
  axios.get(requestUrl).then(response => {
      this.setState({movie: response.data.results})
  });
}

render() {
  //Loading...
  if( this.state.movie[0] === undefined ) {
      return <div>Loading...</div>
  }

  //Loaded successfully...
  return(
   <div> Movie loaded... [Do action here] </div>
  )
}

说明

每当状态改变时，都会触发重新渲染。第一次构建组件时，this.state.movie = []。之后，componentDidMount()被触发，这会改变你的状态。这将再次触发 render 方法。

- dschu

---

基本上，我的应用程序在从源获取数据之前就被渲染了，这就是为什么它会被记录两次的原因？ - Michael Koelewijn

每次状态改变时，都会触发重新渲染。第一次，您的组件被构造为this.state.movie = []。之后，componentDidMount()被触发，它会改变您的状态，这将再次触发render方法。 - dschu

明白了！ 添加上述代码确实有效。感谢您为我澄清这一点；-) - Michael Koelewijn

对于多个React REST服务调用的示例，我查看了很多，但没有一个提到解决时间问题的简单方法。+1。 - SlackGadget

Answer 2

你的帖子是否跨域？

如果你的请求是CORS（跨域资源共享）请求，它将会先于OPTIONS（预检）请求。请查看CORS，特别是预检请求。

基本上，OPTIONS请求用于检查您是否被允许从该域执行GET/POST请求以及可以为该请求使用哪些标头。这不是axios特定的。

- Hasan Sefa Ozalp