无法读取节点值答案

【问题标题】：Can't Read Node Value无法读取节点值
【发布时间】：2021-12-18 02:28:11
【问题描述】：

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

当我的应用程序被渲染时，我在浏览器中看到以下错误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();

我可以做些什么来完成这项工作？

【问题讨论】：

标签： javascript reactjs dom

【解决方案1】：

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

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.';

【讨论】：

【解决方案2】：

错误是说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.';

【讨论】：