uni-app Cannot read property 'appendChild' of null 在 module="renderScript" lang="renderjs" 中

uni-app Cannot read property ‘appendChild’ of null 在 module=“renderScript” lang=“renderjs” 中

开发环境	版本号	项目创建方式
Windows	w10	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：w10

HBuilderX类型：正式

HBuilderX版本号：3.4.7

手机系统：Android

手机系统版本号：Android 8.0

手机厂商：华为

手机机型：huawei p9

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<script module="renderScript" lang="renderjs">
export default {
methods: {
// 接收逻辑层发送的数据
receiveMsg(newValue, oldValue, ownerVm, vm) {
const view = document.getElementById('renderjs-view')
const button = document.createElement('div')
button.innerHTML = newValue
view.appendChild(button)
},
emitData(e, ownerVm) {}
}
}
</script>

操作步骤：

view.appendChild(button)

预期结果：

无报错

实际结果：

报错

bug描述：

TypeError: Cannot read property ‘appendChild’ of null at view.umd.min.js:1

h691938207 1楼•9 天前

提供完整demo，方便排查

phonegap100 2楼•9 天前

亲爱的，代码已经实例上传，这个问题对于我的app很严重，这个问题导致ios一按返回就黑屏，安卓则只是报错

htzhanglong 3楼•9 天前作者

回复阿狸的祈祷: 放在 mounted 里添加buttom

sinazl 4楼•9 天前

回复 FullStack: 或者加延迟

itying888 5楼•9 天前

这就是代码，引进去就能复现了

yuanlaile 6楼•9 天前

时机问题
解决方案：
增加判断
export default { methods: { // 接收逻辑层发送的数据 receiveMsg(newValue, oldValue, ownerVm, vm) { const view = document.getElementById(‘renderjs-view’); if(!view){return}; const button = document.createElement(‘div’) button.innerHTML = newValue view.appendChild(button) }, emitData(e, ownerVm) {} } }

songsunli 7楼•9 天前

好的，已经解决，不过还是的加延迟执行

songsunli 8楼•9 天前

在 uni-app 中使用 renderjs 时，出现 Cannot read property 'appendChild' of null 错误，通常是因为在 renderjs 中尝试操作一个尚未存在的 DOM 元素。renderjs 是 uni-app 提供的一种在非主线程中执行 JavaScript 的机制，通常用于处理一些复杂的计算或操作 DOM。

可能的原因和解决方案：

DOM 元素尚未渲染完成：

在 renderjs 中操作 DOM 时，确保 DOM 元素已经渲染完成。如果尝试在 DOM 元素尚未渲染时进行操作，就会导致 null 错误。
解决方案：可以在 mounted 生命周期钩子中执行 DOM 操作，确保 DOM 已经渲染完成。

export default {
  mounted() {
    this.$nextTick(() => {
      // 确保 DOM 已经渲染完成
      const element = document.getElementById('myElement');
      if (element) {
        element.appendChild(newElement);
      }
    });
  }
}

DOM 元素不存在：
- 确保你尝试操作的 DOM 元素确实存在于页面中。如果元素不存在，document.getElementById 或 querySelector 会返回 null，从而导致错误。
- 解决方案：在操作 DOM 元素之前，先检查元素是否存在。
```
const element = document.getElementById('myElement');
if (element) {
  element.appendChild(newElement);
} else {
  console.error('Element not found');
}
```
renderjs 的执行时机问题：
- renderjs 的执行时机可能与主线程的 DOM 渲染不同步。确保在 renderjs 中操作 DOM 时，DOM 已经准备好。
- 解决方案：可以通过 setTimeout 或 requestAnimationFrame 延迟执行 DOM 操作，确保 DOM 已经渲染完成。
```
setTimeout(() => {
  const element = document.getElementById('myElement');
  if (element) {
    element.appendChild(newElement);
  }
}, 0);
```
renderjs 的作用域问题：
- renderjs 中的代码运行在独立的上下文中，确保你操作的 DOM 元素是在当前上下文中可访问的。
- 解决方案：确保你在 renderjs 中操作的 DOM 元素是在当前页面或组件中定义的。

示例代码：

<template>
  <view>
    <div id="myElement"></div>
  </view>
</template>

<script module="renderScript" lang="renderjs">
export default {
  mounted() {
    this.$nextTick(() => {
      const element = document.getElementById('myElement');
      if (element) {
        const newElement = document.createElement('div');
        newElement.textContent = 'Hello, RenderJS!';
        element.appendChild(newElement);
      }
    });
  }
}
</script>