为啥HTML调用JS无效

Posted 2023-04-08

如果调用的是外部js文件，看看路径是否正确；

如果是在html文件中写在head标签中，看你的函数或者其他是否写错；

有时候js的script标签要写在body中相应元素标签的下面，才会有效。

参考技术A 　　javascript是解释型语言，由上到下捉行分析，写在相关HTML标签之前的JS代码，如不是函数，则不能操纵HTML！您可以把JS代码放到您所要操纵的HTML标签之后，或者把JS代码设计成一个函数，以供HTML调用！ 参考技术B JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在HTML中JS无效，主要看一下你的JS书写是否正确，可以用网页调试工具来看一下，出错的话会有提示。 参考技术C 可能是js代码哪里有错误，才无法执行。 参考技术D <script src="js文件地址"></script>
你也可以将这串写到html文件最后，让他最后加载试试

为啥我在函数内部调用时会收到“错误：无效的挂钩调用”？

【中文标题】为啥我在函数内部调用时会收到“错误：无效的挂钩调用”？

【英文标题】：Why do I get 'Error: Invalid hook call' when I am calling inside a function?为什么我在函数内部调用时会收到“错误：无效的挂钩调用”？

【发布时间】：2021-04-22 04:00:51

【问题描述】：

当我在 Next.js 应用程序上使用挂钩时，我收到 'Error: Invalid hook call'。我不知道为什么我会收到这个错误，因为我认为它是在函数组件中调用的？

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/index.js (16:44) @ getStaticProps
  14 | 
  15 | export const getStaticProps = async () => 
> 16 |   const  data, loading, error  = useQuery(LINGO_QUERY);
     |                                            ^
  17 | 
  18 |   return 
  19 |     props: 

在此处查看我的代码框：https://codesandbox.io/s/empty-sea-hjunv

【问题讨论】：

它不是一个函数组件，你不能在那里使用钩子，我想你应该调用 fetch。

我正在使用 Apollo，所以我不需要使用 fetch？

你使用了 apollo hooks，所以你只能在函数组件中使用它们。

【参考方案1】：

你不能在 react 组件之外使用钩子。

那么，在 nextjs 中，getStaticProps 是在服务器端上下文中使用的函数，并且在构建时预渲染。

https://nextjs.org/docs/basic-features/data-fetching

【讨论】：

谢谢，我已经更新了我的沙盒。我现在收到了TypeError: Cannot read property 'map' of undefined，但我以为我已经在挂钩中定义了它？

您定义了它，但我认为他的值为 null 或未定义（因为 .map 仅可用于数组）。也许您的查询效果不佳，或者您没有任何数据可以在 graphql 中获取

我查看了 GraphQL 操场并返回了我预期的结果。目前数据库中只有一个词： "data": "allTerms": [ "id": "600456129d8f3455d5631403", "term": "accelerator", "slug": "accelerator" ]

好的，但您尝试使用 .map 遍历 data，但它不是数组。查看您的 GraphQL 响应。我认为您需要将 .map 与 allTerms 数组一起使用。 data.allTerms.map((...) => ... )

谢谢。那会起作用，但我认为它不会填充页面，因为它需要等待数据并因此返回未定义。这应该用 await 完成吗？

【参考方案2】：

你不能在组件外使用钩子。你的getStaticProps 不是一个组件，它是一个你用来返回道具的函数。

您可以在此处阅读更多信息：https://reactjs.org/warnings/invalid-hook-call-warning.html#breaking-the-rules-of-hooks

只需在组件中使用 useQuery 钩子并使用它来获取一些数据并定期呈现。

您可能正在某处作为常规函数执行该函数。

要使用钩子，你需要在组件中调用它，这是一个规则，因为钩子可能会返回一些 jsx，而 React 将其作为强制性的。

【讨论】：

谢谢。我已经更新了我的代码框，因为现在我得到了TypeError: Cannot read property 'map' of undefined。但是data是在钩子里定义的，不是吗？

@Anthony 您需要更新您的代码框，它无法正常工作。显示内部服务器错误。您需要添加所有依赖项

我认为这是由于我的 API 在 localhost 上运行，我不确定如何让它在沙箱上运行。该查询位于沙盒的 api 目录中，我已经在 GraphQL 操场上进行了本地测试，它返回了预期的结果。

"data": "allTerms": [ "id": "600456129d8f3455d5631403", "term": "accelerator", "slug": "accelerator" ]

那么你需要首先检查它是否未定义。不能当场使用.map。添加三元data ? data.map... : null