部署到 Heroku 但在本地运行时，React 应用程序中的“.filter 不是函数”错误消息

Question

我以为我已经走到了部署第一个全栈应用程序的漫长道路的尽头……

在本地运行时一切正常，但是在 Heroku 上托管的版本上使用登录 function 时，我收到一条错误消息“未捕获的 TypeError：t[0].filter 不是函数”。

我不确定为什么它应该在本地工作，但不能在 Heroku 上工作，因为理论上代码是相同的。 这是登录 function 的代码，这似乎是导致问题的原因。

    const usersContext = useContext(UsersContext)

    const { users, showRegisterModal, showRegisterSuccessDialog, setCurrentUser, getUsers } = usersContext

    useEffect(() => {
      getUsers()
    }, [])

    const [loginDetails, setLoginDetails] = useState({
        loginEmail: '',
        loginPassword: ''
    })

    const { loginEmail, loginPassword } = loginDetails

    const onChange = (e) => {
        setLoginDetails({ ...loginDetails, [e.target.name]: e.target.value })
    }

    const onSubmit = (e) => {
        e.preventDefault()
      
        const userToLogin = users[0].filter(user => user.email === loginEmail)
       
        if (userToLogin.length === 0) {
            alert("User not found. Please register if you don't have an account.")
        } else if (
            userToLogin[0].password !== loginPassword
        ) {
            alert("Incorrect password")
        } else {
            setCurrentUser(userToLogin)
        
        }
        
    }

    const openRegisterModal = () => {
        showRegisterModal(true)
    }

    if (showRegisterSuccessDialog === true) {
        getUsers()
    }


    return (
   
        <div style={{width: "60%", height: "300px"}} className="d-flex justify-content-center align-items-center">
            <form className="justify-content-center">
             <div className="form-group">
                <label htmlFor="loginEmail">Email:</label>
                <input type="text" name="loginEmail" id="loginEmail" className="form-control" value={loginEmail} onChange={onChange}></input>
             </div>
             <div className="form-group">
                 <label htmlFor="loginPassword">Password:</label>
                 <input type="password" name="loginPassword" id="loginPassword" className="form-control" value={loginPassword} onChange={onChange}></input>
             </div>
             <div className="form-group d-inline-flex">
             <button className="btn btn-primary form-control" onClick={onSubmit}>Log In</button> 
             <button type="button" className="btn btn-success form-control" style={{marginLeft: "10px"}} onClick={openRegisterModal}>Register</button>
            </div>
            <p style={{opacity: `${showRegisterSuccessDialog ? 1 : 0}`, transition: "opacity 400ms"}}>Registration successful! You can now log in.</p>
            </form>
            
        </div>
       
    
    )
}

这是 Heroku 上的应用程序。 您可以使用 johndoe@gmail.com 和密码 123456 作为示例登录来重新创建问题。

该项目的 Github 存储库。

顺便说一句，是否有任何好的资源可以阅读有关在本地运行和部署的应用程序中表现不同的事情？

Answer 1

上下文中的users是 [ { }, { } ]。 所以当你做用户[0]时，它会给你一个 object。 由于错误状态，您不能在 object 上应用filter 。 因此，将您的代码更改为

const userToLogin = users.filter(user => user.email === loginEmail)

删除用户后的 [0]。

Answer 2

当您尝试获取users[0]时，您的用户数组返回undefined并且因为undefined值没有名为.filter的方法，您会得到那个讨厌的错误。

所以你可以像下面这样来防止这种行为：

const userToLogin = users.length > 0 && users[0] !== 'undefined' && users[0].filter(user => user.email === loginEmail)

Answer 3

您正在迭代非数组块，这就是为什么它给您错误的过滤器不是 function。

const userToLogin = users[0].filter(user => user.email === loginEmail)

删除user[0].filter改为使用user.map((ele,index) => { if (ele.length > 0) { return ele[index].filter((elem) => elem.email === loginEmail)} })

如果您的数组不包含任何内容，它将简单地返回而不会出现任何错误。

Answer 4

我已经设法解决了这个问题。 它实际上与 Login.js 文件中的代码无关，而与 server:js 中的这段代码有关：

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'))

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
  })
}

当它需要在它们之后时，它是在我所有其他路线之前。 我使用了一个很好的老式 console.log 来查看 getUsers() function 返回的内容，显然在这种情况下，它是 index.html 的原始代码，因为它本来适用于任何其他 ZDB9744 请求 I7'1083ACEdDE463制作。 因此，所有奇怪的字母都不知从何而来。

正如他们所说，每天都是上学日。 无论如何感谢大家的回答。

Answer 5

我也有这个问题。 不幸的是，我把 Heroku 路线放在所有其他路线之前。 这就是我面临的问题。

 app.use("/api/auth", require("./BACKEND/routes/auth")); app.use("/novel-book", require("./BACKEND/routes/novels")); app.use("/adventure-book", require("./BACKEND/routes/adventures")); app.use("/programming-book", require("./BACKEND/routes/programming")); app.use("/ol-book", require("./BACKEND/routes/ol")); app.use("/al-book", require("./BACKEND/routes/al")); app.use("/comment", require("./BACKEND/routes/comments")); //Error Handler (Should be the last piece of middleware) app.use(errorHandler); if(process.env.NODE_ENV === "production"){ app.use(express.static(path.join(__dirname, "/frontend/build"))); app.get("*", (req, res)=>{ res.sendFile(path.join(__dirname, "frontend", "build", "index.html")); }) }else{ app.get("/", (req,res)=>{ res.send("Api Running"); }) }