我正在尝试从Rest API中获取json数据以进行反应，但是它显示了一些错误

Question

I am trying to fetch the data from Rest API "TVMaze". the data is in json format. I am using react.js for this

this is my myclass.js file

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

    function Myclass(){
      return(
        axios.get("http://api.tvmaze.com/schedule?country=US&date=2019-05-01")
        .then (function(response){
          console.log(response);
        });
      );
    }  

    export default Myclass;

This is my index.js file:

 import React from "react";
    import ReactDOM from "react-dom";
    import Myclass from "./myclass.js";

    import "./styles.css";

    function App() {
      return (
        <Myclass/>
      );
    }

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

This is the error message that I am getting:

    SyntaxError: /src/myclass.js: Unexpected token, expected "," (10:6)

    src/myclass.js: Unexpected token, expected "," (10:6) 8 | .then (function(response){ 9 | console.log(response); > 10 | }); | ^ 11 | ); 12 | } 13 | 8 | .then (function(response){ 9 | console.log(response);
> 10 | }); | ^ 11 | ); 12 | } 13 |
    browser
    Parsing error: Unexpected token, expected "," 8 | .then (function(response){ 9 | console.log(response); > 10 | }); | ^ 11 | ); 12 | } 13 | (null)
    eslint

Answer 1

There are several issues in your code. A react component must either return something to display (eg: dom elements) or null but here you return a Promise when you write

  return(
    axios.get("http://api.tvmaze.com/schedule?country=US&date=2019-05-01")
    .then (function(response){ 
      console.log(response);
    });
  );

Plus you have a space between then and function which raises the error.

When you want to show data coming from an API request, it's good practice to call your API from within componentDidMount and store your data in the state of your component.

You can do it with class-based component:

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

class Myclass extends React.Component{

  state = {data: null};

  componentDidMount(){
    axios.get("http://api.tvmaze.com/schedule?country=US&date=2019-05-01")
      .then(function(response){
        this.setState({data: response})
      });
    }

  render(){
    if(!this.state.data){
      return null; //or a loading spinner or whatever 
    }
   return data // here depending on the format of the data (array or object) you might need to do some process.
  }
}  

export default Myclass;

Or with hooks:

import React, {useEffect} from "react";
import axios from "axios";


const MyClass = function(){
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get("http://api.tvmaze.com/schedule?country=US&date=2019-05-01")
    .then(function(response){
     setDate(response)
    });
  }, []) // with an empty array as a dependency, the API call will be run only once when the component is mounted.

  if(!data){
    return null;
  }

  return data // same comment than before to show your data properly
}

Hope it helps.

Answer 2

Your myclass component should look as follows.

import React ,{useEffect} from "react";
import ReactDOM from "react-dom";
import axios from "axios";

function Myclass(){
 // The below useEffect is equivalent to a componentDidMount.
  useEffect(()=>{
     axios.get("http://api.tvmaze.com/schedule?country=US&date=2019-05-01")
       .then (function(response){
         console.log(response);
       });
  },[]);

  return(

  );
}  

export default Myclass;