繁体   English   中英

React useEffect 附加脚本未触发

React useEffect appended script not triggering

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试加载一个脚本,该脚本一旦触发就会生成一个 iframe 和一个天气小部件。 我可以正确附加脚本,但它不会被调用并且不会生成 iframe

我试过直接在渲染中添加脚本,它会短暂加载 iframe 然后切换回脚本标签

const City = ({ content, schema }) => {
  useEffect(() => {
    let script = document.createElement("script");
    script.src =
  "https://darksky.net/widget/graph-bar/32.7174,-117.1628/us12/en.js?width=100%&height=400&title=Full Forecast&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=us&timeColor=333333&tempColor=ff8200&currentDetailsOption=true";
    script.async = true;

    document.getElementById("widget").appendChild(script);
  }, [])

  return (<div id="widget"></div>);
};

export default City;
1 个回复

注意控制台中显示的警告:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

请参阅在文档上执行写入:除非显式打开,否则无法从异步加载的外部脚本写入文档。

1 React 无限重新渲染,useEffect 问题,未触发设置 state

我的组件似乎进入了无限循环,我找不到原因。 我正在使用useEffect和useState挂钩,但事实并非如此。 对于任何想要将其标记为重复的人:请仔细阅读该问题。 这种无休止的重新渲染循环场景仅在以下情况下发生: 鼠标移动太快用户单击开发者控制台中的任何内容,然后触发mousemove事件(为了 ...

2 React 组件渲染两次并且 useEffect 未触发

我正在使用React + Gatsby ,这是我的第一个React项目。 我在调用两次的组件时遇到了一些问题,而且我添加到该组件的useEffect钩子根本没有被触发。 到目前为止,我已经创建了一个名为CollectionsPage的页面: 当我浏览站点到http://localhost:3001/ ...

3 useEffect 未触发

这是我的useProjects自定义钩子: 当我在某处使用它时,不会触发useEffect部分。 我究竟做错了什么 ? 像这样使用它: 这将返回空数组。 我已经将console.log放在useEffect但它没有被触发。 ...

2020-03-31 18:29:10 1 101   reactjs
4 useEffect 未触发

我认为我的 useEffect 坏了。 我在父组件上 并在子组件上 所以,据我所知,每次${kate}在父组件上获得一个值时,子组件都会触发useEffect钩子。 但是它不起作用。 难道我做错了什么? ...

5 反应 useEffect 未触发

我的 useEffect 代码如下所示: 完整代码: https : //pastebin.com/CP6sLNQZ 每次用户(user_balance)在数据库中更新时都应该触发useEffect,但它没有被触发。 User 是一个 props,它从 redux 传递给组件。 更新余额的 ...

6 Apollo 查询未触发 useEffect

我需要重新获取 Apollo 查询以触发 useEffect。 我正在实现一个过滤器栏,它按日期时间段和文本搜索进行过滤。 我的搜索提交按钮触发了对查询的重新获取,返回的数据是我的 useEffect 的依赖项。 返回数据后,如果填充了搜索字段,则应运行过滤器。 这在我第一次运行搜索时有效,但是当我 ...

7 在 React 中,当它是 useEffect 的依赖项而不触发另一个 API 调用时,我如何将 append 值转换为功能 state?

我有一个待办事项列表应用程序,用户可以阅读和保存项目。 在这里, Todo是一个功能组件,它使用useEffect()钩子在 API 中查询用户列表中的当前项目。 当收到成功的响应时,使用useState()将数据添加到组件的 state 并呈现为ItemList组件的一部分。 当用户在AddIt ...

8 更改 state 后 useEffect 未触发

我正在制作一个自定义下拉列表,允许在下拉列表中推送新项目。 由于某种原因,useEffect 没有在 state 更改时触发,而是在初始渲染时触发。 我很确定我错过了一些小东西,但看不到它。 当用户单击绑定到“addNewOptionToTree”方法的按钮时,应该推送新项目。 然后 categor ...

10 React 的 useEffect 在组件生命周期中什么时候被触发?

我不太明白 React 中的“Mount”是什么意思,什么时候触发 useEffect 和 clean up 函数。 在下面的例子中。 似乎 useToggle 钩子与 App 组件“绑定”(正确的术语?),每次变量isOn更新时,绑定的 App 组件都会重新呈现。 但是,也会调用清理函数。 我试 ...

2020-10-16 06:52:54 2 355   reactjs
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM