Afficher la liste des sentiers dans React - "Avertissement: type d'hélice ayant échoué"

React Newbie

Je suis en train de coder dans React. Je prends un objet de données JSON à partir d'une requête GET vers une api et j'essaie de le transmettre comme accessoire dans un composant. Ensuite, je mappe dessus pour faire une liste d'objets "trail".

J'obtiens cette erreur dans la console: "Avertissement: Echec du type de prop: prop trail non valide de type array fourni à TrailItem , objet attendu . "

Voici le code pour mon composant au niveau de l'application:

import React from "react";
import PropTypes from "prop-types";

const TrailItem = ({ trail: { name, location, imgSmall } }) => {
  return (
    <div className='card text-center'>
      <img src={imgSmall} alt='trail' style={{ width: "25%" }} />
      <h3>{name}</h3>
      <p>{location}</p>
    </div>
  );
};

TrailItem.propTypes = {
  trail: PropTypes.array.isRequired,
};

export default TrailItem;

Pour autant que je sache, il n'y a pas de problème avec le Les données. Un console.log (res.data); renvoie un objet, donc je sais que la requête api fonctionne.

Voici le code de mon composant "Trails": p >

import React, { Component } from "react";
import TrailItem from "./TrailItem";

class Trails extends Component {
  render() {
    return (
      <div style={trailStyle}>
        {Object.keys(this.props.trails).map((key) => (
          <TrailItem key={key} trail={this.props.trails[key]} />
        ))}
      </div>
    );
  }
}

const trailStyle = {
  display: "grid",
  gridTemplateColumns: "repeat(3, 1fr)",
  gridGap: "1rem",
};

export default Trails;

J'ai l'impression que je n'utilise peut-être pas la syntaxe correcte pour entrer dans l'objet, puis plus loin dans le tableau "sentiers", mais je suis perplexe. Merci pour votre aide!

MODIFIER Voici le code "TrailItem":

import React, { Component } from "react";
import "./App.css";
import Navbar from "./components/layout/Navbar";
import Trails from "./components/trails/Trails";
import axios from "axios";

class App extends Component {
  state = {
    trails: {},
  };

  async componentDidMount() {
    const res = await axios.get(
      `https://www.hikingproject.com/data/get-trails?lat=35.0844&lon=-106.6504&maxDistance=10&key=${process.env.REACT_APP_HIKING_PROJECT_KEY}`
    );

    console.log(res.data);

    this.setState({ trails: res.data });
  }

  render() {
    return (
      <div className='App'>
        <Navbar />
        <div>
          <Trails trails={this.state.trails} />
        </div>
      </div>
    );
  }
}

export default App;

J'ai suivi les conseils de l'un des commentaires et j'ai changé le PropType en tableau, et cela a corrigé l'un des avertissements. Mais je ne parviens toujours pas à obtenir une liste de .