求助：无法基于上一页用户选择预填Wix下拉框

核心问题排查与修复步骤 #

1. 存储对象不匹配（最可能原因） #

上一页直接调用session.setItem使用的是原生浏览器sessionStorage，但当前页导入的是Wix官方wix-storage模块的session对象——这两个是完全独立的存储容器，互相无法读取对方的数据。

修复方案二选一：

• 方案A：统一使用Wix wix-storage
  修改上一页代码，导入并使用Wix的session存储：

  import { session } from 'wix-storage';
  import wixLocation from 'wix-location';
  
  export function button43_click(event) {
      session.setItem("statehome", $w('#dropdownstate').value);
      session.setItem("lakehome", $w('#dropdownlake').value);
      wixLocation.to("https://www.laketoads.com/import-791");
  }
  

• 方案B：统一使用原生sessionStorage
  当前页移除wix-storage导入，直接用原生API读取：

  // 移除 import {session} from 'wix-storage';
  import wixData from 'wix-data';
  
  $w.onReady(function () {
      // ... 其他代码
      const selectedstate = sessionStorage.getItem("statehome");
      const selectedlake = sessionStorage.getItem("lakehome");
      // ... 其他代码
  });
  

2. 下拉框选项加载顺序问题 #

当前页设置下拉框value的代码在populateStateData()后直接执行，但populateStateData()是异步查询Wix Data数据集，此时下拉框options尚未加载完成，设置value会无效。

修复方案：

通过异步/await确保数据加载完成后再设置选中值：

import { session } from 'wix-storage';
import wixData from 'wix-data';

$w.onReady(async function () {
    $w('#stateDropdown').options = [];
    $w('#lakeDropdown').options = [];

    $w('#stateDropdown').onChange(async (event) => {
        await populateLakeData(event.target.value);
    });

    // 等待状态数据加载完成
    await populateStateData();

    const selectedstate = session.getItem("statehome");
    if (selectedstate) {
        $w("#stateDropdown").value = selectedstate;
        // 手动触发湖泊数据加载，完成后设置选中值
        await populateLakeData(selectedstate);
        const selectedlake = session.getItem("lakehome");
        if (selectedlake) {
            $w("#lakeDropdown").value = selectedlake;
        }
    }
});

// 修改为异步函数，确保数据加载完成后再更新下拉框
async function populateStateData() {
    const results = await wixData.query("你的状态数据集名称")
        .find()
        .catch(err => console.error("加载状态数据失败：", err));
    
    $w('#stateDropdown').options = results.items.map(item => ({
        label: item.stateName, // 替换为数据集内的显示字段名
        value: item._id // 替换为与上页存储值匹配的字段
    }));
}

async function populateLakeData(stateId) {
    const results = await wixData.query("你的湖泊数据集名称")
        .eq("state关联字段名", stateId) // 替换为数据集内关联状态的字段
        .find()
        .catch(err => console.error("加载湖泊数据失败：", err));
    
    $w('#lakeDropdown').options = results.items.map(item => ({
        label: item.lakeName, // 替换为数据集内的显示字段名
        value: item._id // 替换为与上页存储值匹配的字段
    }));
}

3. 验证存储值与下拉框选项的一致性 #

• 打开浏览器控制台（F12），在Application标签页查看sessionStorage或Wix存储中的statehome、lakehome值
• 对比当前页下拉框options中的value字段，确保两者完全匹配（注意大小写、是否为_id或自定义字段）
• 如果值不匹配，修改上页存储的value为下拉框实际使用的字段值

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