Показать список трасс в React - «Предупреждение: сбойный тип пропеллера» - PullRequest
Новая
       6

Показать список трасс в React - «Предупреждение: сбойный тип пропеллера»

0 голосов
/ 07 апреля 2020

React Newb ie

Я кодирую в React. Я беру объект JSON данных из GET-запроса к API и пытаюсь передать его как опору в компоненте. Затем я сопоставляю его, чтобы составить список объектов «следа».

Я получаю эту ошибку в консоли: "Предупреждение: сбойный тип пропуска: недопустимая опора trail типа array передано TrailItem, ожидается object. "

Вот код для моего компонента уровня приложения: 

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;

Насколько я могу сказать, нет проблема с данными. console.log(res.data); возвращает объект, поэтому я знаю, что запрос API работает.

Вот код для моего компонента "Trails": 

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;

Мне кажется, что я не используя правильный синтаксис для входа в объект, а затем дальше в массив "trails", но я в тупике. Спасибо за вашу помощь!

EDIT Вот код "TrailItem": 

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;

Я последовал совету одного из комментариев и изменил PropType на массив, и это исправило одно из предупреждений. Но я все еще не могу получить список <TrailItem />.

Ответы [ 3 ]

0 голосов
/ 07 апреля 2020

Вы можете присвоить trails значение по умолчанию или начальное значение пустого массива, чтобы можно было вызывать функцию карты. Используя пустой массив, компонент отобразит пустой массив и вернет пустой массив для визуализации.

Значение по умолчанию: 

const Trails = ({ trails }) => {
  console.log(trails.trails);
  return (
    <div style={trailStyle}>
      {trails.map(trail => <TrailItem key={trail.id} trail={trail} />)} 
    </div>
  );
};

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

Начальное значение: 

const Trails = ({ trails = [] }) => {
  console.log(trails.trails);
  return (
    <div style={trailStyle}>
      {trails.map(trail => <TrailItem key={trail.id} trail={trail} />)} 
    </div>
  );
};

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

Примечание: Это не исправит передачу пропуска неправильного типа, но реакция проверки пропадает. Похоже, что с этим битом разобрались.

0 голосов
/ 07 апреля 2020

Я решил это! Конечно, возможно, я не был понятен в своем первоначальном вопросе, но я понял, почему не могу получить доступ к объекту данных из API.

Мне нужно было еще раз войти в объект после получения ответа в моем компоненте приложения: this.setState({ trails: res.data.trails });

Как только я это сделал, в моем компоненте Trails мне потребовалось Object.key(), чтобы сделать превратить опору "тропы" в массив, чтобы я мог .map() над ней.

И наконец, «хитрая» часть заключалась в том, что мне нужно было использовать каждый «ключ» в качестве индекса для каждой «тропы», которую я пытался передать <TrailItem />: 

{Object.keys(trails).map((key) => (
    <TrailItem key={key} trail={trails[key]} />
))}
0 голосов
/ 07 апреля 2020

Внутри приложения App рендеринг, поместите это в начало: 

if (!this.state.trails.length) {
  return <div>Loading...</div>;
}
...