如何解决React开发时出现'undefined is not a function (near ...userForm.map...)'报错

核心问题原因 #

• 你传入的route.params.paramKey是JSON字符串格式，直接赋值给状态后，userForm是字符串类型，不具备数组的map方法，调用时会直接抛出报错。
• 你当前useEffect的依赖项包含userForm本身，同时在effect内部更新userForm，会触发无限重渲染循环。
• React的setState是异步更新逻辑，执行赋值操作后立刻打印状态，拿到的是更新前的旧值，属于正常表现。
• 你解析后的JSON结果是对象格式，原有代码直接对对象调用.length和map方法也会报错，需要提取你需要渲染的fields数组字段。

修复后代码 #

const FormScreen = ({route}) => {
  const [userForm, setUserForm] = useState([]);

  useEffect(() => {
    // 校验路由参数是否存在
    if (!route.params?.paramKey) return;
    try {
      // 反序列化JSON字符串得到对象
      const paramData = JSON.parse(route.params.paramKey);
      // 提取需要渲染的fields数组赋值给状态
      setUserForm(paramData.fields);
    } catch (err) {
      // 异常捕获，避免参数格式非法时页面崩溃
      console.error('参数解析失败：', err);
      setUserForm([]);
    }
  // 依赖项改为路由参数，避免无限循环
  }, [route.params?.paramKey])

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.textStyle}>COLLECTION :</Text>
        {userForm.length > 0 ? (
          userForm.map((item, index) => (
            // 静态列表优先用索引当key，避免每次渲染生成新uuid触发不必要的重渲染
            <Text key={index}>{item}</Text>
          ))
        ) : (
          <Text> Loading ... </Text>
        )}
        {/* 剩余原有逻辑 */}
      </View>
    </SafeAreaView>
  )
}

如果你的业务逻辑需要渲染JSON里的其他字段，只需调整从解析后的paramData里提取对应字段赋值给状态即可。

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