时间戳

首页 > 解决方案 > 子动态组件内的 API 不获取数据

javascript - 子动态组件内的 API 不获取数据

问题描述

我有一个 api (photoFetch)，它从在线 JSONplaceholder 获取包含照片数据的 JSON。它位于我的子组件内部，即基于id的动态组件（父组件是我的主页）

userPhotoPage.js（子组件）

export const UserPhotoPage = async ({match}) => {
const [data, setData] = useState("");

const photoFetch = await fetch('https://jsonplaceholder.typicode.com/photos')
        .then(res => res.json())
        .then(result => setData(data.albums))
        .catch(error => console.log("error"))

const userPhoto = photoFetch.find((userPhoto) =>{
    return parseInt(match.params.id) == userPhoto.id
})

return <>
    {match.isExact && <>
        <h1>{userPhoto.title}</h1>
        <p>image = {userPhoto.url}</p>
        </>}
    </>
}

我还尝试将其包装在 try catch 语句中，但没有任何效果。它不获取数据，我总是得到一个“（TypeError）：无法读取未定义的属性'find'”，因为我的const userPhoto没有从photoFetch.find（（userPhoto）获取任何数据。我是REACT的新手所以我真的不知道如何着手解决这个问题。已经研究了一段时间了。

我能够在我的父组件（主页）上使用用户 JSON 获取数据，并且我使用了一种非常相似的方法。我正在尝试为我的子组件重新创建它，但它不起作用。这是它在主页上的样子。（我只在这里发布一段代码，顶部）

homePage.js（父组件，只是一个例子）

class homePage extends Component {
constructor(props) {
    super(props);
    this.state = {
        users: [],
        isLoading: false,
        search: ""
    };
}
async componentDidMount() {
    this.setState({isLoading: true});
    await fetch('https://jsonplaceholder.typicode.com/users')
        .then(res => res.json())
        .then(result => this.setState({users: result}))
        .catch(error => console.log("error"))
}

再次感谢堆栈溢出帮助像我这样的菜鸟！

标签： javascriptreactjs

解决方案

当你做const photoFetch = await (...)你的代码等待得到承诺的结果并用它设置 const 的值。但是，您的 promise 没有返回任何内容，因为 last 的主体.then()执行了一个 void 操作，该操作只是通过调用来更改钩子“数据”的值setData(...)。这就是为什么您的错误说“无法读取未定义的属性'find'”：photoFind 在那个时候没有分配值。
您应该在最后一个箭头函数中返回一个值，.then()以便将该值设置为常量。（我不知道你正在使用的 API，所以我不确定这个值应该是什么。也许你的 userPhoto 正试图在你的钩子中搜索一个名为 data 的值？）

PD：我还建议您记住在isLoading获取结果或在主页的方法中捕获错误时再次将值设置为false ComponentDidMount！

推荐阅读