React Native循环调用setUsers报Transform Error的原因及疑问

问题根本原因 #

你原代码里的错误是语法括号不匹配，和React Native/Expo的环境变更无关：

setUsers(user => [...user, users[key]) // 这里少了两个闭合括号：数组的 ] 和箭头函数的 )

正确的写法应该是：

setUsers(user => [...user, users[key]])

React JS环境没报错大概率是因为所使用的编译工具（比如CRA的Babel配置）对这类语法错误有一定容错处理，但React Native/Expo的Metro打包器对语法错误的校验更严格，直接抛出了转换错误。

你自行解决代码里的小问题 #

你的修复代码里有两处笔误，需要修正：

• 变量名不一致：声明的是storeUsers，但push的时候写的是storedUsers
• 取值错误：user[key]应该是users[key]

修正后的代码：

useEffect(() => {
  setUsers([])
  let storeUsers = []
  const getEditors = async() => {
    if(currentUser) { 
      let users = await getAllUsers()
      for(const key in users){
        if((users[key].editor === "pending" || users[key].editor === "editor") && users[key].id !== currentUser?.uid) {
          storeUsers.push(users[key])
        }
      }
      setUsers(storeUsers)
    }
  }
  getEditors()
}, [editors]);

关于语法支持与工具差异 #

• Expo/React Native使用Metro作为默认打包器，它的语法转换规则更贴近标准ES规范，对语法错误的容忍度低
• React JS常用的Create React App等工具，其Babel配置包含一些宽松的转换规则，可能会自动修复部分语法不严谨的地方
• 如果你想统一语法校验规则，可以在项目中配置严格的ESLint规则（比如eslint:recommended中的no-unexpected-multiline等规则），提前发现这类语法问题

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