使用 REACTJS 中的 fetch() function 进行 API CALL 时未加载数据

Question

I have tried to make an apicall with react code and tried to print the response but it shows error react code

    import React,{Component} from 'react'
    
    class ApiCall extends Component 
    {
        constructor(props)
        {
            super(props);
            this.state=
            {
                items:[],
                isloaded:false,
            }
        }
    
        componentDidMount()
        {
            fetch('api.openweathermap.org/data/2.5/weather?q=chennai&appid=e407e5e8......')
            .then(res=>res.json())
            console.log(res.json())
            .then(json=>{
                 this.setState({
                     isloaded:true,
                     items: json,
                 })
            });
        }
    
        render()
        {
            var{isloaded,items}=this.state;
    
            if(!isloaded)
            {
                return <div>Loading..</div>;
            }
            else
            {
            return(
                <div>
                   Data Loaded
                   <ul>
                       {items.map(item=>(
                           <li key={item.id}>
                               Title: {item.title  }
                               Body:{item.body}
                           </li>
                       ))};
                   </ul>
                </div>
            )
            }
        }
    }
    
    export default ApiCall;

inside app.js

    class App extends Component 
    {
      render()
      {
        return(
          <div className="App">
            <ApiCall/>
          </div>
        )
      }
    }

**folder structure: project:
src:
App.js
components:
apicall.js **

I got an error in the browser saying, Failed to compile src\components\apicall.js Line 20:21: 'res' is not defined no-undef

Note:The link inside fetch() is taken from openweather website

Can somebody help me with this?

Answer 1

the issue is you are using the res outside of the then block to solve it add this to the code

.then((res) => {
    console.log(res.json());
    return res.json();
 })