API data not being copied and stored into the state in react, how would I do this?

Question

So I'm new to react and I have this predicament. I'm firstly using axios to get a "database" from JSONPlaceholder which I can then store in the state and then I want to call an API to fill in missing data that was not in the database. Just a quick run down of the code, I am using grabdata to grab the data that I need from JSONPlaceholder and put it in the array. Then I am using callsetcycle, which calls the setcycle method which should cycle through the array positions and get the data that I need and then store it in the array of suggesteddestinations too. My Problem is, is that the information in not called and stored and I don't understand why. Any help will be appreciated.

export class App extends Component {
state = {
    suggesteddestinations : [],
    scheduleddestinations : [],
    loaded: false
}


componentDidMount = () =>{
    this.grabData().then(
        this.callsetCycle()
    )
}

callsetCycle = () =>{
    if (this.state.suggesteddestinations.length>0){
        console.log("2")
        this.setCycle().then(
            this.setState({
                loaded: true
        }))
    }
}

grabData = () =>{
    return new Promise(() => {
        var url = "https://my-json-server.typicode.com/dharquissandas/weatherApp/suggesteddestinations";
        Axios.get(url)
        .then(contents => this.setState({ suggesteddestinations: contents.data}))
    });
}

setCycle = () => {
    return new Promise(() => {
        var i
        if (this.state.suggesteddestinations.length > 0){
            for (i = 0; i < this.state.suggesteddestinations.length; i++) {
                console.log("5")
                this.apiCallCurrentWeather(this.state.suggesteddestinations[i].name, i)
                this.apiCallForcast(this.state.suggesteddestinations[i].name, i)
            }
        }
    });
}

apiCallCurrentWeather = async (name, pos) => {
    const apicall = await fetch("http://api.openweathermap.org/data/2.5/weather?q="+name+"&units=metric&APPID=5afdbd7139b98ae3f70a76b0dda2b43b")
    await apicall.json()
    .then(data =>
        this.setState(
            this.setCurrentWeatherProperties(data, pos)
        )
    )
}

setCurrentWeatherProperties = (data, pos) => {
    this.state.suggesteddestinations[pos].temp = data.main.temp.toString()
    this.state.suggesteddestinations[pos].desc = data.weather[0].main
    this.state.suggesteddestinations[pos].tempmax = data.main.temp_max.toString()
    this.state.suggesteddestinations[pos].tempmin = data.main.temp_min.toString()
    this.state.suggesteddestinations[pos].feelslike = data.main.feels_like.toString()
    this.state.suggesteddestinations[pos].pressure = data.main.pressure.toString()
    this.state.suggesteddestinations[pos].windspeed = data.wind.speed.toString()
} 


apiCallForcast = async (name, pos) => {
    const apicall = await fetch("http://api.openweathermap.org/data/2.5/forecast?q="+name +"&units=metric&APPID=5afdbd7139b98ae3f70a76b0dda2b43b")
    await apicall.json()
    .then(data =>
        this.formatForcast(data, pos)
    )
}

formatForcast = (data, pos) => {
    this.state.suggesteddestinations[pos].dayone = data.list[4]
    this.state.suggesteddestinations[pos].daytwo = data.list[12]
    this.state.suggesteddestinations[pos].daythree = data.list[20]
    this.state.suggesteddestinations[pos].dayfour = data.list[28]
    this.state.suggesteddestinations[pos].dayfive = data.list[36]
}


render (){
    console.log(this.state.suggesteddestinations)
    console.log(this.state.loaded)
    if (this.state.loaded) return null;
    return(
        <div>
            <BrowserRouter>
                <div className="container">
                    <Header />
                    {/* <Route path="/" render={(props) =>
                        <Home {...props} suggesteddestinations={this.state.suggesteddestinations} />
                    } /> */}
                    <Route path="/home" component = {Home} exact />
                    <Route path="/CurrentWeather/:id" component = {CurrentWeather} />
                    <Route path="/EventSelection/:id" component = {EventSelection} />
                    <Route path="/Schedule" component = {Schedule} />
                </div>
            </BrowserRouter>
        </div>
    )
}

}

muddassir · Accepted Answer · 2020-03-13T04:46:46.770

There are a few issues in the code , State cannot be mutated meaning this.state cannot be set outside the constructor.The other issue is the code is over-engineered :) Since you are learning react I would recommend that you understand how State Management / Props / Component life cycle methods from the react documentation

Nice try!

Here is the actual refactored code :

import React,{Component} from 'react'

export default class StackApp60663913 extends Component {
    state = {
        suggesteddestinations : [],
        scheduleddestinations : [],
        loaded: false
    }


    componentDidMount = () =>{
        this.grabData()
    }

    grabData = async () =>{
        let suggestionsApi = "https://my-json-server.typicode.com/dharquissandas/weatherApp/suggesteddestinations";

        let suggestionFetch = await fetch(suggestionsApi)
        let suggestionData = await suggestionFetch.json()   

        for (let index = 0; index < suggestionData.length; index++) {
            let city = suggestionData[index]

            let weatherFetch = await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${city.name}&units=metric&APPID=5afdbd7139b98ae3f70a76b0dda2b43b`)   
            let weatherData = await weatherFetch.json()

            let {main,weather,clouds,wind,sys} = weatherData.list[0]

            suggestionData[index].temp = main.temp.toString()
            suggestionData[index].desc = weather[0].description
            suggestionData[index].tempmax = main.temp_max.toString()
            suggestionData[index].tempmin = main.temp_min.toString()
            suggestionData[index].feelslike = main.feels_like.toString()
            suggestionData[index].pressure = main.pressure.toString()
            suggestionData[index].windspeed = wind.speed.toString()

        }

        this.setState({
            suggesteddestinations : suggestionData,
            loaded:true            
        })

    }    

    render (){
        console.log(this.state.suggesteddestinations)
        return(
            <div>
                {this.state.loaded ? 
                <div>
                    {
                        this.state.suggesteddestinations.map((element)=>
                        <li>
                           ID-{element.id},Name-{element.name},Temp-{element.temp},Desc-{element.desc},TempMin-{element.tempmin},TempMax-{element.tempmax} 
                        </li>)
                    }
                </div> :  <div>Loading Data...</div>
                }
            </div>
        )
    }

}

API data not being copied and stored into the state in react, how would I do this?

1 Answers1