如何提取Firestore返回对象中的动态数组名以预填充React动态表单字段？

解决方案 #

你可以直接用Object.entries()遍历你从Firestore拿到的映射结构，把它转换成你state对应的格式就能实现预填充，同时你现有代码有几处属性不匹配的问题需要修正，具体改动如下：

1. 预填充数据转换 #

假设你从Firestore获取到的原始数据存在firestoreBrandData变量中，在模态框加载/数据拉取完成后，用下面的逻辑更新state即可：

// 你的Firestore原始数据示例
const firestoreBrandData = { "electrolux": [ "model1", "model2" ], "bosch": [ "model1", "model2", "model3", "model4" ] };

// 转换为state需要的结构
const formattedData = Object.entries(firestoreBrandData).map(([brandName, modelList]) => ({
  brand: brandName,
  models: modelList
}));

// 替换state的初始值
setPassarTill(formattedData);

Object.entries()会把对象的键值对转换成[键, 值]的二维数组，你不需要提前知道键的具体值，就能遍历拿到所有品牌名和对应的型号数组。

2. 现有代码修正 #

你当前的渲染代码里，输入框绑定的属性和state里定义的属性不一致，需要修改两处：

• 品牌输入框的value属性应该绑定x.brand，而非不存在的x.tillverkare
• 型号输入框的value属性需要把数组转成逗号分隔的字符串，绑定x.models.join(',')，而非不存在的x.modell

修正后的渲染代码：

{passarTill.map((x, i) => {
      return (
        <div key={i}>
          <div className="flex flex-wrap">
            <label className="w-4/12">
              <p className="w-4/12">Tillverkare</p>
              <input
                className="border w-11/12 p-1.5"
                name="brand"
                placeholder="T.ex. Electrolux"
                value={x.brand}
                onChange={(e) => handleInputChange(e, i)}
              />
            </label>
            <label className="w-6/12">
              <p className="w-full">
                Modeller (separera endast med kommatecken ",")
              </p>
              <input
                className="border w-full p-1.5"
                name="models"
                value={x.models.join(',')}
                onChange={(e) => handleArrayChange(e, i)}
              />
            </label>
            <div className="flex flex-auto items-end justify-end">
              {passarTill.length !== 1 && (
                <button
                  className="text-xs w-18 p-2.5 bg-gray-300"
                  onClick={() => handleRemoveClick(i)}
                >
                  Radera
                </button>
              )}
              {passarTill.length - 1 === i && (
                <button
                  className="text-xs w-18 py-2.5 px-2 ml-1 bg-gray-300"
                  onClick={handleAddClick}
                >
                  Lägg till
                </button>
              )}
            </div>
          </div>
        </div>
      );
    })}

可选优化 #

可以在handleArrayChange里加个过滤逻辑，避免空输入生成无效的空字符串元素：

const handleArrayChange = (e, index) => {
    const name = e.target.name;
    let value = e.target.value.replace(/\s+/g, "-").toLowerCase().split(",").filter(Boolean);
    const list = [...passarTill];
    list[index][name] = value;
    setPassarTill(list);
};

内容的提问来源于stack exchange，提问作者Alexander Hylla-Nyberg