我正在做John Larsen的书《React Hooks in Action》第2章中的练习。当我克隆他的repository时,react应用程序成功启动。然而,当我自己编写它时(再次检查我没有忽略任何代码),我得到了一个错误。
下面是我重现这个问题的最小代码:
我的项目结构是
public
index.html
src
components
App.js
index.js
static.json
package.json
static.json
的内容是从他的git repo复制的。
以下是App.js
的内容
import {bookables} from "../static.json";
export default function App() {
const bookablesInGroup = bookables.filter(b => b.group === "Room");
return ( <p>Hello</p> )
}
我得到以下错误
ERROR in ./src/components/App.js 7:27-43
export 'bookables'.'filter' (imported as 'bookables') was not found in '../static.json' (possible exports: 0, 1, 2, 3, 4, 5)
我的第一个想法是在static.json
中添加一个导出,但这显然不是解决方案。我快疯了我忽略了什么?谢谢!
2条答案
按热度按时间toiithl61#
bookables是JSON数据中的属性。
filter
是一个可用于数组对象的函数。在上一个案例中,您从静态JSON导入了bookables
,它引用的是JSON数据。在这种情况下,您必须对bookables.bookables
进行过滤(第一个bookables引用导入的数据,第二个bookables引用JSON数据中的数组bookables)。工作,因为在导入中,您将JSON数据称为
data
,并且在下一行中,您将从JSON数据中提取属性bookables
。而且,bookables
现在是一个数组,您可以在其上调用filter。简而言之,在第一种情况下,您试图在JSON对象上调用
filter
,而在工作场景中,您正在JSON对象内的数组元素上调用filter
。希望这个能帮上忙
rjee0c152#
我通过改变
到
我在https://stackoverflow.com/a/73143324/471461和ES6 Destructuring and Module imports中找到了答案。
看起来我在import语句中混合了 named imports 和 destructuring,尽管我不知道为什么书中的例子有效。