哦写的编辑收货地址页面的代码：

<template> 
  <AddressTop btnName="保存" title="编辑收货地址" @btn-click="rightBtnClick" @back-click="handleBackClick"/>
  <div class="wrapper">
    <div class="newAddress">
      <div class="newAddress__item">
        <div class="newAddress__item__text">所在城市：</div>
        <input class="newAddress__item__input" type="text" v-model="addrById.city" />
      </div>
      <div class="newAddress__item">
        <div class="newAddress__item__text">小区/大厦/学校：</div>
        <input class="newAddress__item__input" type="text" v-model="addrById.department" />
      </div>
      <div class="newAddress__item">
        <div class="newAddress__item__text">楼号-门牌号：</div>
        <input class="newAddress__item__input" type="text" v-model="addrById.houseNumber" />
      </div>
      <div class="newAddress__item">
        <div class="newAddress__item__text">收货人：</div>
        <input
          class="newAddress__item__input"
          type="text"
          v-model="addrById.name"
        />
      </div>
      <div class="newAddress__item">
        <div class="newAddress__item__text">联系电话：</div>
        <input class="newAddress__item__input" type="text" v-model="addrById.phone" />
      </div>
    </div>
    <Toast v-if="toastData.isShowToast" :message="toastData.toastMessage" />
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { reactive, ref, toRefs } from "vue";
import { post } from "../../utils/request";
import Toast, { useToastEffect } from "../../components/Toast";
import {get} from "../../utils/request";
import AddressTop from "./AddressTop";


const addressEffect = (showToast) => {
  const route = useRoute();  
  const addressId = route.params.id;  
  const index= parseInt(addressId.substr(1))-1; 
  // const addrById=ref({})
  const addrData=reactive({addrById:{}})
  const getAddress = async () => {
    try {
      const result = await get("api/user/address");     
      if (result.errno == 0 && result?.data?.length) {        
        addrData.addrById=result.data[index]
        // addrById.value=result.data[index]
        // console.log(addrById.value)
      } 
     } catch (e) {
      console.log(e);
    }
  };
  getAddress();
  const { addrById } = toRefs(addrData);
  // console.log(addrById.city)

  const rightBtnClick = async () => {
    try {
      const result = await post("/api/user/address", {
        _id:addressId,
        city: addrById.city,
        department: addrById.department,
        houseNumber: addrById.houseNumber,
        name: addrById.name,
        phone: addrById.phone,
      });
      if (result.errno == 0) {
        showToast("Modify success!");
      }
    } catch (e) {
      console.log(e);
      showToast("Modify address fail!");
    }
  };
  return { rightBtnClick, getAddress,addrById,addressId };
};

const pageSkipEffect = () => {
  const router = useRouter();
  const handleBackClick = () => {
    router.back();
  };
  return { handleBackClick };
};
export default {
  name: "ModifyAddress",
  components: { Toast,AddressTop },
  setup() {
    const { toastData, showToast } = useToastEffect();
    const { rightBtnClick, getAddress,addrById,addressId  } = addressEffect(showToast);
    const { handleBackClick } = pageSkipEffect();
    return {
      handleBackClick,
      showToast,
      toastData,
      rightBtnClick,
      getAddress,
      addrById,
      addressId
    };
  },
};
</script>

取出来的地址数据放在变量 addrById里，input框数据双向绑定，客户修改数据后，addById会跟着发生变化，然后把该值赋值给post 请求的参数，这样对吗？

在post参数赋值时，addrById.city这样的写法会得到值吗？为什么我打印console.log(addrById.city)显示undifined？无论用ref还是用reactive定义变量均如此。

还有，怎么才能准确找到这个地址并修改，给id就可以了吗？