是否可以将 JSON 数据从一个组件获取/解析到不同的渲染/动态路由?(反应JS)

Question

我是 reactJS 的新手，刚开始学习它以进行编码作业，但我被困在这个问题上。我在组件中创建了一个 api，用于从在线 JSON 原型网站获取照片和相册数据，并且我想使用该数据显示在用户页面上(仅与该特定用户/用户 ID 相关的照片和相册(。用户页面是父组件(主页(的动态子组件。这是到目前为止

的样子这适用于 JSON 数据。我称之为 apiData

import React, { Component } from "react";
class apiData extends Component {
state = {
photos: [],
albums: [],
isLoading: false
};
componentDidMount() {
this.loadData();
}
loadData = async () => {
const photos = await fetch(
"https://jsonplaceholder.typicode.com/photos"
);
const albums = await fetch(
"https://jsonplaceholder.typicode.com/albums"
);
const photoData = await photos.json();
const albumData = await albums.json();
this.setState({ isLoading: true, photos: photoData, albums: albumData});
};
render() {
return (
<div className="App">
<p> dataObject={this.state.results}</p>
</div>
);
}
}

这是渲染/动态路由。 目前，我正在使用const userPhoto = apiData.photos.find((userPhoto) =>{尝试访问 API，但我收到一个错误，说

类型错误： 无法读取未定义的属性'查找'

(请记住，这两个组件编码在同一个.js文件上(

const userPhotoPage = ({match}) => {
const userPhoto = apiData.photos.find((userPhoto) =>{
return parseInt(match.params.id) == userPhoto.id
})
return <>
{match.isExact && <>
<h1>{userPhoto.title}</h1>
<p>image = {userPhoto.url}</p>
</>}
</>
}

我希望我的 userPhotoPage 函数能够成功访问 apiData 中的数据，以便我可以对其进行操作并将数据添加到照片页面，但我不确定这是否可能？如果我需要提供更多信息，我很乐意提供！

Answer 1

看起来您正在尝试访问未定义对象上的 find 方法。首先，.find(( 方法是数组上的迭代器。我尝试从您的 JSON 照片 API 获取数据，但由于某种原因，它挂在了这一端。我不确定该 API 是否真的返回一个数组。我会先研究一下。接下来，即使它返回一个数组并且您能够在其上链接 find 方法，您仍然会遇到函数范围的问题。照片对象的作用域为/私有您的 loadData 异步功能。您将无法在函数之外访问它。