React中无法获取props.savedAddress列表索引，需匹配点击事件的key

无法获取props.savedAddress列表的索引，需要在点击事件中对索引与传入的key进行匹配。

相关处理函数代码 #

const editAddHandler = (event, key) => {
  const db = getDatabase();
  onValue(ref(db, `users/${userId}/addressData`), (snapshot) => {
    const addresslist = [];
    snapshot.forEach((childSnapshot) => {
      const keyName = childSnapshot.key;
      const data = childSnapshot.val();
      addresslist.push({ key: keyName, data: data });
    });
    props.setSavedAddress(addresslist);
  });

  console.log("array of element",props.savedAddress)

  const clickedAddress = props.savedAddress.findIndex(element => element === key)
  console.log("clicked key",clickedAddress)
      
  const keyValue = props.savedAddress[key];
  console.log("keyvalue",keyValue)
  
  console.log("key",key)

  if(key === props.savedAddress[key]) {
    setValues({
      name: props.savedAddress[key].data.name,
      phone: props.savedAddress.phone,
      pincode: props.savedAddress.pincode,
      address: props.savedAddress.address,
      city: props.savedAddress.city,
      state: props.savedAddress.state,
      landmark: props.savedAddress.landmark,
      defaultAdd: props.savedAddress.defaultAdd,
    })
  }
  props.showAddressHandler();
};

相关截图 #

问题分析与修复 #

• 异步数据更新导致的取值问题
  onValue是异步操作，你在调用props.setSavedAddress(addresslist)后立刻读取props.savedAddress，此时新数据还未更新到props，拿到的是旧值。需把后续处理逻辑放在onValue回调内部，确保使用最新的地址列表。

• findIndex的匹配逻辑错误
  props.savedAddress的元素是对象（{ key: keyName, data: data }），用element === key匹配时，对象与字符串永远不相等，导致findIndex返回-1。正确写法是匹配元素的key属性：

const clickedAddressIndex = props.savedAddress.findIndex(element => element.key === key)

• 数组取值与属性访问错误
  props.savedAddress[key]是按数组索引取值，但key是Firebase节点的字符串key，不是数组索引。应先找到对应元素，再访问其data属性：

const targetAddress = props.savedAddress.find(element => element.key === key)
// 或用上面拿到的索引
const targetAddress = props.savedAddress[clickedAddressIndex]

• setValues时的属性访问错误
  赋值时错误直接访问props.savedAddress.phone这类属性，需从目标元素的data对象中取值：

setValues({
  name: targetAddress.data.name,
  phone: targetAddress.data.phone,
  pincode: targetAddress.data.pincode,
  address: targetAddress.data.address,
  city: targetAddress.data.city,
  state: targetAddress.data.state,
  landmark: targetAddress.data.landmark,
  defaultAdd: targetAddress.data.defaultAdd,
})

修复后的完整代码 #

const editAddHandler = (event, key) => {
  const db = getDatabase();
  onValue(ref(db, `users/${userId}/addressData`), (snapshot) => {
    const addresslist = [];
    snapshot.forEach((childSnapshot) => {
      const keyName = childSnapshot.key;
      const data = childSnapshot.val();
      addresslist.push({ key: keyName, data: data });
    });
    props.setSavedAddress(addresslist);

    // 所有逻辑移至回调内，确保使用最新数据
    console.log("array of element", addresslist);

    const clickedAddressIndex = addresslist.findIndex(element => element.key === key);
    console.log("clicked index", clickedAddressIndex);

    const targetAddress = addresslist.find(element => element.key === key);
    console.log("target address", targetAddress);

    console.log("key", key);

    if (targetAddress) { // 确保找到目标地址再赋值
      setValues({
        name: targetAddress.data.name,
        phone: targetAddress.data.phone,
        pincode: targetAddress.data.pincode,
        address: targetAddress.data.address,
        city: targetAddress.data.city,
        state: targetAddress.data.state,
        landmark: targetAddress.data.landmark,
        defaultAdd: targetAddress.data.defaultAdd,
      });
    }
    props.showAddressHandler();
  });
};

内容的提问来源于stack exchange，提问作者user1450966