React Native+Firebase食谱应用报错：data.map is not a function

开发React Native食谱应用时，手动向Firebase Realtime Database添加JSON数组数据，arr.map()可以正常运行；但通过应用写入数据后，出现data.map is not a function错误，删除新增数据后应用恢复正常。

问题根源 #

1. 数据结构不匹配：
   • 手动添加的是数组结构，snapshot.val()返回数组，因此可以直接调用map方法。
   • 通过应用写入时，你用nanoid生成的ID作为tarifler下的子节点key，写入后tarifler变为对象结构（key为每个食谱ID，value为对应食谱数据），此时snapshot.val()返回的是对象，而对象没有map方法，直接调用就会报错。
2. State修改方式错误：
   写入组件中，TextInput的onChangeText直接修改state对象（如data.ad = val），这不符合React的state更新规则，会导致state无法正确触发重新渲染，数据可能未同步。

解决方案 #

1. 修复数据读取逻辑：将对象转为数组

在读取数据时，把Firebase返回的对象转为数组，统一处理两种数据结构：

function getData() {
  const db = database;
  const recipes = ref(db, "tarifler/");
  onValue(recipes, (snapshot) => {
    const rawData = snapshot.val();
    // 将对象转为数组，若数据为空则返回空数组
    const recipesArray = rawData ? Object.values(rawData) : [];
    setData(recipesArray);
  });
  setIsLoading(false);
}

2. 修复State更新方式

写入组件中，所有TextInput的onChangeText必须通过setData返回新对象来更新state，同时添加value属性绑定对应state字段，确保输入框值与state同步：

// Ad输入框示例
<TextInput
  onChangeText={(val) => setData(prev => ({ ...prev, ad: val }))}
  className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
  placeholder="Ad"
  value={data.ad}
/>

// 其他输入框同理修改
<TextInput
  onChangeText={(val) => setData(prev => ({ ...prev, gorsel: val }))}
  className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
  placeholder="Görsel Linki"
  value={data.gorsel}
/>

<TextInput
  onChangeText={(val) => setData(prev => ({ ...prev, kategori: val }))}
  className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
  placeholder="Kategori"
  value={data.kategori}
/>

<TextInput
  onChangeText={(val) => setData(prev => ({ ...prev, tarif: val }))}
  multiline={true}
  numberOfLines={6}
  className="text-xl h-[200px] p-4 bg-[#F6F6F6] rounded-xl"
  placeholder="Tarif"
  value={data.tarif}
/>

<TextInput
  onChangeText={(val) => setData(prev => ({ ...prev, malzemeler: val }))}
  multiline={true}
  numberOfLines={6}
  className="text-xl h-[200px] p-4 bg-[#F6F6F6] rounded-xl"
  placeholder="Malzemeler"
  value={data.malzemeler}
/>

额外说明 #

如果希望保持Firebase中的数组结构，也可以改用Firebase的push方法自动生成节点key，但用Object.values()转换的方式更通用，兼容手动添加的数组和应用写入的对象两种数据结构。

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