在 React 中显示跟踪列表 - "Warning: Failed prop type"

Question

React新手

我在React中编码。我将一个JSON数据对象从GET请求传递到api，并试图将其作为组件中的道具传递。然后我在它上面映射，形成一个"轨迹"对象列表。

我在控制台中收到以下错误："警告：失败的道具类型：提供给TrailItem的类型为array的道具trail无效，应为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"数组，但我被难住了。谢谢你的帮助！

编辑这是"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更改为array，并修复了其中一个警告。但我仍然无法获得<TrailItem />的列表。

Answer 1

应用程序内部的渲染方法将其放在开头：

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

Answer 2

您可以给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,
};

注意：这不会修复传递不正确类型的道具的问题，但道具验证反应确实会。听起来你已经解决了这个问题。

Answer 3

我解决了它当然，我可能不清楚我最初的问题，但我发现了为什么我无法从API访问数据对象。

在我的应用程序组件中收到响应后，我需要再次进入该对象：this.setState({ trails: res.data.trails });

一旦我做到了，在我的Trails组件中，我需要Object.key()来将"Trails"道具变成一个数组，这样我就可以在上面使用.map()

最后，"棘手"的部分是，我需要使用每个"键"作为我试图传递给<TrailItem />:的每个"线索"道具的索引

{Object.keys(trails).map((key) => (
<TrailItem key={key} trail={trails[key]} />
))}