时间戳

首页 > 解决方案 > Javascript：在函数调用中传递有效参数，然后一转未定义

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

问题描述

这是一个带有 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 个参数：

它从两个位置调用：

  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)

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

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

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

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

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

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

标签： javascriptreactjsfirebasereact-reduxinternationalization

解决方案

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

推荐阅读