[] in reactive() is null?

[lgz5689]

Version

3.0.4

Reproduction link

https://gitee.com/liguangzheng777/school/blob/master/src/views/student/add.vue

Steps to reproduce

<!-- html -->
<el-option v-for="(item, i) in state.classesArr" :key="i" :label="item.name" :value="item.name"> </el-option>

// js
const state = reactive({classesArr: []})

onBeforeMount(() => {
      state.classesArr = [0,1,2]
})

console:
Uncaught (in promise) TypeError: oldChildren is null

if : const state = reactive({classesArr: [0]})

code run success

What is expected?

lgz

What is actually happening?

[] is null?? how to solve

---

how to solve,thanks

[underfin]

You overwirte the value at here https://gitee.com/liguangzheng777/school/blob/master/src/views/student/add.vue#L97

[lgz5689]

You overwirte the value at here https://gitee.com/liguangzheng777/school/blob/master/src/views/student/add.vue#L97

in 97 overwirte console error:Uncaught (in promise) TypeError: oldChildren is null
I attempt shield https://gitee.com/liguangzheng777/school/blob/master/src/views/student/add.vue#L26 code success

[lgz5689]

You overwirte the value at here https://gitee.com/liguangzheng777/school/blob/master/src/views/student/add.vue#L97

in 97 overwirte console error:Uncaught (in promise) TypeError: oldChildren is null
I attempt shield https://gitee.com/liguangzheng777/school/blob/master/src/views/student/add.vue#L26 code success

in 97 overwirte console:
Uncaught (in promise) TypeError: oldChildren is null
patchBlockChildren runtime-dom.esm-bundler-f3a18650.js:5142
processFragment runtime-dom.esm-bundler-f3a18650.js:5211
patch runtime-dom.esm-bundler-f3a18650.js:4854
patchBlockChildren runtime-dom.esm-bundler-f3a18650.js:5159
patchElement runtime-dom.esm-bundler-f3a18650.js:5123
processElement runtime-dom.esm-bundler-f3a18650.js:4941
patch runtime-dom.esm-bundler-f3a18650.js:4858
patchBlockChildren runtime-dom.esm-bundler-f3a18650.js:5159
patchElement runtime-dom.esm-bundler-f3a18650.js:5123
processElement runtime-dom.esm-bundler-f3a18650.js:4941
patch runtime-dom.esm-bundler-f3a18650.js:4858
componentEffect runtime-dom.esm-bundler-f3a18650.js:5421
reactiveEffect runtime-dom.esm-bundler-f3a18650.js:339
callWithErrorHandling runtime-dom.esm-bundler-f3a18650.js:1300
flushJobs runtime-dom.esm-bundler-f3a18650.js:1508
promise callbackqueueFlush runtime-dom.esm-bundler-f3a18650.js:1410
queueJob runtime-dom.esm-bundler-f3a18650.js:1404
run runtime-dom.esm-bundler-f3a18650.js:480
trigger runtime-dom.esm-bundler-f3a18650.js:486
set runtime-dom.esm-bundler-f3a18650.js:588
classes2 \a\vue3\handbook\src\views\student\add.vue:97
setup \a\vue3\handbook\src\views\student\add.vue:88
callWithErrorHandling runtime-dom.esm-bundler-f3a18650.js:1300
callWithAsyncErrorHandling runtime-dom.esm-bundler-f3a18650.js:1309
__weh runtime-dom.esm-bundler-f3a18650.js:3056
flushPostFlushCbs runtime-dom.esm-bundler-f3a18650.js:1479
flushJobs runtime-dom.esm-bundler-f3a18650.js:1515
promise callbackqueueFlush runtime-dom.esm-bundler-f3a18650.js:1410
queueCb runtime-dom.esm-bundler-f3a18650.js:1432
queuePostFlushCb runtime-dom.esm-bundler-f3a18650.js:1438
queueEffectWithSuspense runtime-dom.esm-bundler-f3a18650.js:2530
scheduler runtime-dom.esm-bundler-f3a18650.js:3217
run runtime-dom.esm-bundler-f3a18650.js:480
trigger runtime-dom.esm-bundler-f3a18650.js:486
scheduler runtime-dom.esm-bundler-f3a18650.js:1116
run runtime-dom.esm-bundler-f3a18650.js:480
trigger runtime-dom.esm-bundler-f3a18650.js:486
scheduler runtime-dom.esm-bundler-f3a18650.js:1116
run runtime-dom.esm-bundler-f3a18650.js:480
trigger runtime-dom.esm-bundler-f3a18650.js:486
set value runtime-dom.esm-bundler-f3a18650.js:1026
finalizeNavigation vue-router.esm-bundler.js:2585
pushWithRedirect vue-router.esm-bundler.js:2458
promise callback*pushWithRedirect vue-router.esm-bundler.js:2429
push vue-router.esm-bundler.js:2369
install vue-router.esm-bundler.js:2727
use runtime-dom.esm-bundler-f3a18650.js:4094
\a\vue3\handbook\src\main.ts:16

[lgz5689]

@underfin why this array default cannot set [] , only set [0],[{}] and more ?
because this array render el-option ?

[lgz5689]

@underfin why this array default cannot set [] , only set [0],[{}] and more ?
because this array render el-option ?

to be exact , this array default set [] , overwrite will be error , but default set [0],[{}] will not error

[posva]

Duplicate of #2820

When opening bug reports make sure to follow https://new-issue.vuejs.org/?repo=vuejs/vue#why-repro

[underfin]

Oh.Sorry for mistaken.