Search code examples
reactjsapireact-chartjs

Error when getting state value: Uncaught TypeError: Cannot convert undefined or null to object at Function.keys

I'm super new to react and sorry for asking such this simple question.

I'm trying to create a chart using ChartJS from an online API.

My js script:

 constructor(props) {
    super(props);
    this.state = {
        daily_data: [],
        hourly_data: [],
        currency: this.props.currency,
        chartData: {}
    }
    this.getChartData = this.getChartData.bind(this);

}

getChartData() {

    this.setState({
        chartData: {
            datasets: [
                {
                    label: Object.keys(this.state.daily_data[this.state.currency]),
                    data: Object.values(this.state.daily_data[this.state.currency]),
                    fill: false,
                    borderColor: "rgba(255,255,255,0.1)",
                    backgroundColor: "rgba(0, 0, 0,0.2)",
                    pointBackgroundColor: "rgb(255,255,255)",
                }
            ]
        }
    })

}

 componentWillMount() {
    fetch("https://asia-northeast1-s3688090-cc2018.cloudfunctions.net/cool-api")
    .then(res=>res.json())
    .then(result => this.setState({
        daily_data: result,
    }))
    .catch(error => console.log("error" + error));
      }


render() {
    this.getChartData();
    return (
   ....
    )
 }

The problem occurs at: label: Object.keys(this.state.daily_data[this.state.currency])

Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at ViewDetails.getChartData (bundle.js:82729)
at ViewDetails.render (bundle.js:82783)
at bundle.js:55899
at measureLifeCyclePerf (bundle.js:55180)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:55898)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:55925)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:55467)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:55363)
at Object.mountComponent (bundle.js:8034)

The fetch API is working fine as in my react tool it actually shows that state daily_data has all the API value:

enter image description here

As I've read the documents as well as some similar questions on StackOverflow states that ReactJS doesn't mutate the update immediately and can call callback to solve the problem I'm not sure if it's really the problem.

Thanks.

Solution
    • Try use Async Await

    • And change componentWillMount() with componentDidMount()

      async componentDidlMount() { const response = await fetch("https://asia-northeast1-s3688090-cc2018.cloudfunctions.net/cool-api"); const json = await response.json(); this.setState({ daily_data: json }); }