无法读取节点值

Question

我的目标是设置变量的初始值，然后使用大括号直接将其放在代码中。

在呈现我的应用程序时，我在浏览器中看到以下错误 TypeError: Cannot read properties of undefined (reading 'value')。

如果不使用条件语句，我还能怎么做？该行如下：

let dateContent = document.getElementsByClassName('email')[1].value !== undefined ? document.getElementsByClassName('email')[1].value : 'Your date will show up here when you submit it.';

我想通过在 try...catch 块中包装声明以及之前的函数来解决这个问题。但是，在将错误消息记录到控制台后，读取该值的行将停止工作。我有一个看起来像这样的组件：

import Name from "../items/Name";
import Contact from "../items/Contact";
import Button from "../items/Button";

import { refresh } from '../libraries/mamaia';

const Mobile = () => {
    let dateContent = document.getElementsByClassName('email')[1].value !== undefined ? document.getElementsByClassName('email')[1].value : 'Your date will show up here when you submit it.';

    return (
        <div className="mobile-container">
            <header className="fixed-header" onClick={refresh}><Name /></header>
            <main className="mobile-content">
                <article className="contact-form-container">
                    <Contact 
                        firstInput='What is this event?'
                        secondInput='When does it start?'
                        secondInputType = 'date'
                        thirdInput='What additional information do you have?'
                    />
                    <span>
                        <Button message="Set a Countdown!" />
                    </span>
                </article>
                <article className="saved-countdowns">
                    <h1 className="heading"></h1>
                    <p className="description"></p>
                    <p className="description"></p>
                    <section className="btn-container">
                        <button className="arrow-btn">
                            <i className="fas fa-long-arrow-alt-left"></i>
                        </button>
                        <button className="arrow-btn">
                            <i className="fas fa-long-arrow-alt-right"></i>
                        </button>
                    </section>
                </article>
            </main>
        </div>
    )
}

export default Mobile;

它通过 index.js 文件中的路由器呈现：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { render } from 'react-snapshot';
import './styles/index.min.css';

import React from 'react';
import reportWebVitals from './reportWebVitals';

import App from './App';
import Mobile from "./comps/Mobile";

render(
  <React.StrictMode>
    <Router>
      <App />
      <Switch>
        <Route exact path="/app" component={Mobile} />
      </Switch>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

我该怎么做才能完成这项工作？

Answer 1

错误是说 document.getElementsByClassName('email')[1] 是 未定义，而不是 document.getElementsByClassName('email')[1].value。所以你应该做

let dateContent = document.getElementsByClassName('email')[1] !== undefined ? document.getElementsByClassName('email')[1].value : 'Your date will show up here when you submit it.';

Answer 2

您可以使用长度属性来避免该错误，因为您可能会访问数组中的空槽，从而引发此错误。

let dateContent = document.getElementsByClassName('email').length > 1 && document.getElementsByClassName('email')[1].value ? document.getElementsByClassName('email')[1].value : 'Your date will show up here when you submit it.';

无法读取节点值

Can't Read Node Value

javascript

dom

reactjs