我正在做John Larsen的书《React Hooks in Action》第2章中的练习。当我克隆他的repository时，react应用程序成功启动。然而，当我自己编写它时（再次检查我没有忽略任何代码），我得到了一个错误。
下面是我重现这个问题的最小代码：
我的项目结构是
public
index.html
src
components
App.js
index.js
static.json
package.jsonstatic.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，尽管我不知道为什么书中的例子有效。