时间戳

首页 > 解决方案 > “validation.ts:145 Uncaught Error”有什么解决办法吗？

javascript - “validation.ts:145 Uncaught Error”有什么解决办法吗？

问题描述

我收到此错误

validation.ts:145 Uncaught Error: Reference.set failed: First argument contains undefined in property 'messages.-MS6_zD3OURA8VJbSsOd.email'     
at iu (validation.ts:145)     
at validation.ts:204     
at Sa (util.ts:417)     
at iu (validation.ts:185)     
at Ga (validation.ts:122)     
at Ol.set (Refere
```

--Java 脚本从这里开始--

     // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyCrbgYvaGmfje2In9nOOW6pyTpKV967MAs",
    authDomain: "goldybai-s-website.firebaseapp.com",
    projectId: "goldybai-s-website",
    storageBucket: "goldybai-s-website.appspot.com",
    messagingSenderId: "584274595197",
    appId: "1:584274595197:web:b7621d56037143b18f9014"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
// Reference messages collection
var messagesRef = firebase.database().ref("messages");

// Listen for form submit

document.getElementById("contactForm").addEventListener("submit", submitForm);
// Submit form
function submitForm(e) {
  e.preventDefault();

  // Get values
  var name = getInputVal("name").value;
  var email = getInputVal("email").value;
  var phone = getInputVal("phone").value;
  var message = getInputVal("message").value;

    // Save message
    saveMessage((name, email, phone, message));
//   console.log(name);
}


// Function to get get form values

function getInputVal(id) {
  return document.getElementById(id).value;
}

// Save message to firebase
function saveMessage(name, email, phone, message) {
    var newMessageRef = messagesRef.push();
    newMessageRef.set({
        name: name,
        email: email,
        phone: phone,
        message: message,
    })
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Christchurch - Hair - Cuts</title>
</head>
<body>

   <div class="container">
        <!-- Nav -->
        <nav class="main-nav">
            <img src="img/logo.png" alt="" class="logo">

            <ul class="main-menu ">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Bookings</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Deals</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>

            <ul class="right-menu">
                <li>
                    <a href="#">
                        <i class="fas fa-search"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-shopping-cart"></i>
                    </a>
                </li>
            </ul>
        </nav>

    <!-- Log In Form -->

    <div class="form-container">
        <h1 class="brand">Bookings</h1>
        <div class="wrapper animated bounceInLeft">
            <div class="company-info">
                <ul>
                    <li><i class="fa fa-road"></i>Cobra St Christchurch</li>
                    <li><i class="fa fa-phone"></i>(022) 173-6590</li>
                    <li><i class="fa fa-envelope"></i>sukh@gmail.com</li>
                </ul>

            </div>

            <div class="contact">
                <h3>Let Us Know!</h3>

<!-- @TODO - Validation -->
                <form id="contactForm" autocomplete="on">
                    <p>
                        <label>Name</label>
                        <input type="text" name= "name" id="name">
                    </p>
                    
                    <p>
                        <label>Email Address</label>
                        <input type="email" name= "email" id="email">
                    </p>
                    <p>
                        <label>Phone Number</label>
                        <input type="text" name= "phone" id="phone">
                    </p>
                    <!-- <p>
                        <input type="datetime-local" id="haircut" name="Haircut">
                    </p>

                    <p>
                        <input list="haircut" name="haircut">
                        <datalist id="haircut-types">
                        <option value="Baby">
                        <option value="Men">
                        <option value="Women">
                        </datalist>
                    </p> -->
                      
                    <p class="full">
                        <label>Message</label>
                        <textarea name="message" id="message" cols="30" rows="10"></textarea>
                    </p>
                    <p class="full">
                        <button type="submit">Submit</button>
                    </p>
                </form>

            </div>
        </div>
    </div>

         <!-- Footer -->
    <footer class="footer">
        <div class="footer-inner">
            <ul>
                <li><a href="#">Sitemap</a></li>
                <li><a href="#">Privacy &cookies</a></li>
                <li><a href="#">Terms of use</a></li>
                <li><a href="#">Trademarks</a></li>
                <li><a href="#">&copy; Christchurch Cuts 2021</a></li>
            </ul>
        </div>
    </footer>

    <script src="https://www.gstatic.com/firebasejs/8.2.4/firebase.js"></script>
   <script src="/js/main.js"></script>
</body>
</html>

CSS

/* Contac Form */

.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #000;
    line-height: 1.6;
    padding: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    font-size: 20px;
}

.brand {
    text-align: center;
    margin-bottom: 1rem;  
    font-size: 3rem;
}

.wrapper {
    max-width: 100%;
    box-shadow: 0 0 20px 0 rgba(51, 51, 51);
}

.wrapper > *{
    padding: 1rem;
}

.company-info {
    background: #333;
}

.company-info h3, 
.company-info ul {
    text-align: center;
    margin: 0 0 1rem 0;

}

.contact h3 {
    font-size: 2rem;
}

/* Form Styles */
.contact form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.contact form label {
    display: block;
}

.contact form p {
    margin: 0;
}

.contact form .full {
    grid-column: 1 / 3;
}

.contact form button, 
.contact form input, 
.contact form textarea {
    width: 100%;
    padding:  1em;
    border: 1px solid #000;
}

.contact form button {
    background: #fff;
    color: #000;
    border: 0;
    text-transform: uppercase;
}

.contact form button:hover, .contact form button:focus {
    background: #000;
    color: #fff;
    outline: 0;
    transition: background-color 1s ease-out;
}

标签： javascriptfirebase-realtime-database

解决方案

错误消息非常明确：

Reference.set 失败：第一个参数在属性'messages.-MS6_zD3OURA8VJbSsOd.email'中包含未定义

您正在将值传递undefined给数据库，这是不允许的。您传递的路径undefined是messages.-MS6_zD3OURA8VJbSsOd.email，因此这意味着 if 的值email在undefined此代码中：

newMessageRef.set({
    name: name,
    email: email,
    phone: phone,
    message: message,
})

我建议在调试器中运行代码，并查看email这一行。

如果电子邮件可以undefined并且您的代码应该处理它，那么最简单的修复可能是这样的：

newMessageRef.set({
    name: name,
    email: email || "",
    phone: phone,
    message: message,
})

推荐阅读