是否可以从一个组件获取/解析 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 function 能够成功访问 apiData 中的数据，因此我可以对其进行操作并将数据添加到照片页面，但我不确定这是否可能？ 如果我需要提供更多信息，我很乐意提供！

Answer 1

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