Состояние компонента не обновляется после разрешения запроса axios

Question

Вот мой фрагмент кода:

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;

В приведенном выше примере я пытаюсь получить значение из локального JSON с помощью axios и хочу обновить ответ в моем состоянии планировщикасоставная часть.Это не отражает.

Существуют ли новые способы реализации этого?Я новичок, чтобы реагировать.

Answer 1

setState неверный синтаксис в вашем коде. Также вам не нужен self, так как вы используете функцию стрелки для обратного вызова axios .then, который свяжет контекст с охватывающей областью

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