Vue.js 3 -替换/更新React性对象,而不丧失React性

z4bn682m  于 2023-02-24  发布在  Vue.js
关注(0)|答案(4)|浏览(237)

我需要在获取后用一些数据更新一个React式对象:

setup(){
    const formData = reactive({})

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          formData = data //how can i replace the whole reactive object?
        }
      })
    })
  }

formData = data将无法工作,并且formData = { ...formdata, data }
有没有更好的办法?

i34xakig

i34xakig1#

虽然布萨杰拉·布拉希姆的解决方案有效,但它不是这个问题的确切答案。
从某种意义上说,React性数据不能用=重新分配,但有一种方法可以重新分配React性数据,即Object.assign
因此,这应该有效

setup(){
        const formData = reactive({})
    
        onMounted(() => {
          fetchData().then((data) => {
            if (data) {
              Object.assign(formData, data) // equivalent to reassign 
            }
          })
        })
      }
    • 注:**

当React对象为空或始终包含相同的关键帧时,此解决方案有效。
然而,如果formData具有key x,并且data不具有key x,则在Object.assign之后,formData仍将具有key x,因此这不是 * 严格地 * 重新分配。
演示示例;包括手表

egdjgwm8

egdjgwm82#

根据官方文件:
由于Vue的React性跟踪通过属性访问工作,因此我们必须始终保持对React性对象的相同引用。这意味着我们无法轻松地 “替换” React性对象,因为与第一个引用的React性连接丢失了
reactive应定义一个具有嵌套字段的状态,这些嵌套字段可以如下变化:

setup(){
    const data= reactive({formData :null })

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          data.formData = data 
        }
      })
    })

  }

如果只有一个嵌套字段,则使用ref

setup(){
    const formData = ref({})

    onMounted(() => {
      fetchData().then((data) => {
        if (data) {
          formData.value = data 
        }
      })
    })

  }
9lowa7mx

9lowa7mx3#

我认为使用ref并通过xxx.value = xxx更新的方法是目前最好的。

0dxa2lsx

0dxa2lsx4#

我猜:

formData = reactive(newObject)

相关问题