Ошибка при получении значения состояния: Uncaught TypeError: Невозможно преобразовать неопределенное или нулевое значение в объект в Function.keys

Question

Я супер новичок, чтобы среагировать и извините, что задаю такой простой вопрос.

Я пытаюсь создать диаграмму с помощью ChartJS из онлайнового API.

Мой сценарий js:

 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 (
   ....
    )
 }

Проблема возникает по адресу: 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)

API выборки работает нормально, так как в моем инструменте реагирования он фактически показывает, что состояние daily_data имеет все значение API:

Поскольку я прочитал документы, а также некоторые похожие вопросы по StackOverflow, говорится, что ReactJS не изменяет обновление немедленно и может вызвать обратный вызов для решения проблемы. Я не уверен, действительно ли это проблема.

Спасибо.

Answer 1

• Попробуйте использовать Async Await

• и изменить componentWillMount() с 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 }); }

Answer 2

Подумайте над тем, чтобы дать вашему ключу label начальное значение, возможно, пустой массив.