Reactjs 解决axios请求后未更新组件状态

以下是我的代码片段：

import React, { Component } from "react";
import axios from "axios";
import PlanDetails from "./PlanDetails";
import Pagination from "./Pagination";
import PropTypes from "prop-types"; //ES6

class Planner extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      destinations: [],
      vacations: [],
      itineraries: []
    };
  }

  componentDidMount() {
    const self = this;
    axios
      .get("sample.json")
      .then(res => {
        const data = res.data;
        self.setState(data => {
          destinations: data.destinations;
          vacations: data.vacations;
          itineraries: data.itineraries;
        });
      })
      .catch(err => {});
  }

  render() {
    return (
      <div>
        <h1>Planner</h1>
        <PlanDetails />
        <Pagination />

        <ul>
          {this.state.destinations.map(destination => (
            <li key={destination.url}>{destination.text}</li>
          ))}
        </ul>
      </div>
    );
  }
}

Planner.propTypes = {};

export default Planner;

import React，{Component}来自“React”；
从“axios”导入axios；
从“/PlanDetails”导入PlanDetails；
从“/Pagination”导入分页；
从“道具类型”导入道具类型//ES6
类计划器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
目的地：[]，
假期：[]，
行程：[]
};
}
componentDidMount（）{
const self=这个；
axios
.get（“sample.json”）
。然后（res=>{
常数数据=分辨率数据；
self.setState（数据=>{
目的地：数据目的地；
假期：数据。假期；
行程：数据。行程；
});
})
.catch（err=>{}）；
}
render（）{
返回(
计划者

{this.state.destinations.map（destination=>(
{destination.text}
))}

);
}
}
Planner.propTypes={}；
导出默认计划器；

在上面的示例中，我试图在axios的帮助下从本地JSON获取值，并希望在planner组件的状态中更新响应。这不是反映

---

有没有新的方法来实现这一点？我是个新手。

setState

代码中的语法不正确。另外，您不需要

self

，因为您正在为axios

使用箭头函数。然后

回调将上下文绑定到封闭范围

  this.setState({
      destinations: data.destinations,
      vacations: data.vacations,
      itineraries: data.itineraries
    });

---

您对javascript完全陌生吗？我很确定您应该使用逗号

，

而不是分号

在
setState（）中（
：）