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

Question

这是一个带有 Redux 和 Firebase 的 React web 应用程序。 当我遇到这个问题时，我已经完成了 react-redux-i18n（多语言支持）的实现。 该应用程序支持两种语言环境，比如说“en”和“pl”。 Current locale is stored in state and in sync with firebase, that's the idea anyway and that's where I've encountered this strange behaviour: one of the 3 parameters, while present and valid before the call to the function turns undefined in the function that subsequently失败。

这是我打电话的 function：

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) })
}

function 采用 3 个参数：

• uid：字符串，
• 用户：object，
• 语言：字符串

它从两个位置调用：

1. 在应用程序加载时，它会获取用户数据，包括。 来自 firebase 的语言环境，并在验证后将其保存回 firebase，以防不支持语言环境并回退到“en”。 如果删除了对用户先前存储的语言环境的支持，则有可能。 此调用正常工作。
2. 当用户单击标志图片以更改语言环境时，来自语言更改器组件。 由于user object 未定义，此调用失败。

这是 function 的调用组件：

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.log确认我在调用之前有正确的数据，但在被调用的 function 中， user object 未定义，而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, firstVisit7070:2, ...} Lingo70570:28,} Lingo

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

在 function 中：06N6iv34gZfyWeF未定义user.js:41

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

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

Answer 1

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