Question

我目前正在尝试从端点获取数据，但我一直收到一条错误，指出我的render方法有一个意外的令牌。任何帮助都是值得赞赏的。

此外，我不确定我是否正确地将数据包括在内。

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')
);

Answer 1

尝试以下代码，我已更正了两个语法错误（fetchData和class缺少关闭括号）和一些问题警告。

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')
);

Answer 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')
    );

反应中的render（）方法问题

2 个答案: