时间戳

首页 > 解决方案 > 为什么App.js中这部分代码不起作用？（我做了一个搜索过滤器）

javascript - 为什么App.js中这部分代码不起作用？（我做了一个搜索过滤器）

问题描述

我有一些使用 Fetch 方法从数组中获取的名称列表，目前我想实现一个搜索过滤器，但是当我将 resetData () 方法插入到我的 componentDidMount 中时，我收到了这个错误： 在此处输入图像描述

这是我的沙盒中的代码：
https ://codesandbox.io/s/blue-cherry-66e9p


我应该在我的代码中修复什么以使我的搜索过滤器起作用？也许原因不仅在这一行？componentDidMount () 必须在那里，因为没有它其他东西将无法在我的项目中工作

标签： javascriptreactjs

解决方案

您忘记在function函数名称 resetData 前面添加

 async function resetData()  {
    const response = await fetch("/data/mass.json");
    const data = await response.json();
    this.setState({
        data
    });

这将为您解决错误。但这会产生范围问题，所以我建议这样做。

const resetData = async () =>  {
    const response = await fetch("/data/mass.json");
    const data = await response.json();
    this.setState({
        data
    });

也因为这个函数在里面componentDidMount()。您不能像尝试在内部渲染一样单独调用它，所以我建议您在 componentDidMount 之外获取此函数并在 componentDidMount 内部调用它，例如 -

const data = await this.resetData();

我想这如你所愿？

https://codesandbox.io/s/eloquent-albattani-7nyxt

编辑：我编辑了代码框内的代码，以便它可以根据您的需要工作。

推荐阅读