Javascript：在函数调用中传递有效参数，然后一转未定义

Question

这是一个带有 Redux 和 Firebase 的 React Web 应用。当我遇到这个问题时，我已经完成了 react-redux-i18n（多语言支持）的实现。 该应用程序支持两种语言环境，比如说“en”和“pl”。当前语言环境存储在 state 中并与 firebase 同步，这就是我的想法，这就是我遇到这种奇怪行为的地方：3 个参数之一，虽然在函数调用之前存在且有效，但随后在函数中变为未定义失败。

这是我正在调用的函数：

export const SaveLanguageToDb = (uid, user, lang) => {
  console.log('in function:', uid, user)
  database.ref(`users/${uid}`).update({ currentLanguage: lang, ...user })
  .then(() => {
    return
  })
  .catch(e => { console.log('Error:', e) })
}

该函数有3个参数：

• uid：字符串，
• 用户：对象，
• 语言：字符串

它从两个位置调用：

1. 在应用程序加载时，它会获取用户数据，包括。来自firebase的语言环境并保存 它在验证后返回到 firebase，以防语言环境不存在 支持并已回落到“en”。如果支持是可能的 为用户之前存储的语言环境删除。这个电话有效 正确。
2. 当用户点击标志图片时，来自语言转换器组件 更改语言环境。由于user 对象进入，此调用失败 未定义。

这里是调用函​​数的组件：

import React from 'react'
import { connect } from 'react-redux'
import en from '../../../public/images/United_Kingdom.png'
import pl from '../../../public/images/Poland.png'
import { SaveLanguageToDb } from '../../actions/user'
import { setLocale, } from 'react-redux-i18n'

export const LingoFlags = ({ uid, user, SaveLanguageToDb, setLocale }) => {
  console.log('before call:', uid, user)
  return (
  <div>
    <button
      className="button button--link"  
      onClick={() => {
        setLocale('en')
        SaveLanguageToDb(uid, user, 'en')
      }}
    >
      <img src={en} alt="en" />
    </button>
    <button
      className="button button--link"  
      onClick={() => {
        console.log('onClick:', uid, user)
        setLocale('pl')
        SaveLanguageToDb(uid, user, 'pl')
      }}
    >
      <img src={pl} alt="pl" />
    </button>
  </div>
)}

const matchStateToProps = (state) => ({
  uid: state.auth.uid,
  user: state.user,
})

const mapDispatchToProps = (dispatch) => ({
  SaveLanguageToDb: (lang) => dispatch(SaveLanguageToDb(lang)),
  setLocale: (lang) => dispatch(setLocale(lang))
}) 

export default connect(matchStateToProps, mapDispatchToProps)(LingoFlags)

console.logs 确认在调用之前我有正确的数据，但在被调用函数中，user 对象未定义，而uid 字符串正确传递，如下所示：

通话前：06N6iv34gZfyWeF {displayName: "Some Name", email: "somenamel@gmail.com", emailVerified: true, numberOfVisits: 102, firstVisitAt: 1591402705798, ...} LingoFlags.js:9
onClick: 06N6iv34gZfyWeF {displayName: "Some Name", email: "somename@gmail.com", emailVerified: true, numberOfVisits: 102, firstVisitAt: 1591402705798, ...} LingoFlags.js:24

action @@i18n/SET_LOCALE @ 19:13:40.651 redux-logger.js:1

在函数中：06N6iv34gZfyWeF undefined user.js:41

未捕获的错误：Reference.update 失败：第一个参数包含 未定义...

我希望这些信息足以让人们对这个谜团感兴趣。谢谢。

Answer 1

根据 mapDispatchToProps 'SaveLanguageToDb' 仅接收 1 个参数。这可能是问题吗？