反应中的render（）方法问题答案

【问题标题】：Issue with render() method in react反应中的render（）方法问题
【发布时间】：2018-05-18 04:20:21
【问题描述】：

我目前正在尝试从端点获取数据，但我不断收到错误消息，指出我的渲染方法有一个意外的令牌。感谢您的帮助。

我也不确定我是否正确地包围了数据。

var React = require('react');
var ReactDOM = require('react-dom');


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

  componentDidMount() {
    this.fetchData()
  }

fetchData() {
    fetch('https://facebook.github.io/react-native/movies.json', {method: "GET"})
      .then((response) => response.json())
      .then((response) =>{

     this.setState({ movies: response.movies})
         console.log(this.state.movies)
         console.log(response.data)
      })
      .catch((error) => {
          console.error(error);
  })

 render(){
    return (
      <div>
          <h1> Currently Showing:</h1>
          <p>{this.state.movies[0]}</p>
      </div>
    );
}

ReactDOM.render(
  <GetAMovieTitle />,
  document.getElementById('root')
);

【问题讨论】：

错字？似乎缺少 2 个右括号，用于 fetchData() 和 class。 – 注意：SyntaxErrors 只能将您引导到解析器发现有问题的地方。其原因通常可能在此之前。
您可能还希望将电影初始化为空数组，以便渲染方法不会抛出 TypeError。此外，看起来端点提供的 json 具有“电影”属性（在您的响应回调中，您试图访问返回的对象上不存在的“数据”属性）。
ReactDOM.render( 应该在课堂之外，所以添加上面 cmets 中提到的右括号，你就完成了:)
@JonathanLonowski 很好，我更新了 fetchData() 函数并缺少 Class 大括号。现在我的 fetch 功能不起作用。返回获取失败

标签： javascript reactjs api fetch

【解决方案1】：

试试下面的代码，我已经纠正了两个语法错误（fetchData 和 class 缺少右括号）和一些 eslint 警告。

export default LoginStack;

var React = require('react');
var ReactDOM = require('react-dom');


class GetAMovieTtile extends React.Component {
    constructor(props) {
        super(props);
        this.state = { movies: null };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        fetch('https://facebook.github.io/react-native/movies.json', { method: "GET" })
        .then((response) => response.json())
        .then((response) => {
            this.setState({ movies: response.data });
            console.log(this.state.movies);
            console.log(response.data);
        })
        .catch((error) => {
            console.error(error);
        });
    }

    render() {
        return (
        <div>
            <h1> Currently Showing:</h1>
            <p>{this.state.movies[0]}</p>
        </div>
        );
    }
}

ReactDOM.render(
  <GetAMovieTtile />,
  document.getElementById('root')
);

【讨论】：

还有一些错误，我更新了它并更正了一些错别字。现在我的 fetch 函数出错了

【解决方案2】：

您的代码中缺少两个括号。我还在你的渲染方法中添加了一个空检查 - 你可能想用一个加载指示器或类似的替换它。如果您的组件在包含任何状态之前被挂载，这将避免打印控制台错误。

见下文：

var React = require('react');
var ReactDOM = require('react-dom');


class GetAMovieTitle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { movies: null };
  }

  componentDidMount() {
    this.fetchData()
  }

  fetchData() {
    fetch('https://facebook.github.io/react-native/movies.json', { method: "GET" })
      .then((response) => response.json())
      .then((response) => {

        this.setState({ movies: response.data })
        console.log(this.state.movies)
        console.log(response.data)
      })
      .catch((error) => {
        console.error(error);
      })
  }

    render(){
      if (!this.state.movies) {
        return null;
      }
      
      return (
        <div>
          <h1> Currently Showing:</h1>
          <p>{this.state.movies[0]}</p>
        </div>
      );
    }
}

    ReactDOM.render(
      <GetAMovieTitle />,
      document.getElementById('root')
    );

【讨论】：

我更新了 fetchData() 函数并缺少 Class 大括号。现在我的 fetch 功能不起作用。返回获取失败