Javascript 无编译错误，但未捕获TypeError:使用Copy.select（）复制文本为空

我正在使用React Development创建一个允许您访问匿名邮件的应用程序 这只是一个在React中开始使用的展示应用程序

基本上，我的脚本就是生成一串电子邮件并让你复制它

函数genrateStrings正在创建一个随机的电子邮件字符串 CopyIt可以让你复制它 这里我的Logic.js看起来像

const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
export function generateString(length) 
{
    let result = ' ';
    let addr = "@example.com";
    const charactersLength = characters.length;
    for ( let i = 0; i < length; i++ ) 
    {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    result=result+addr;

    return result;
}

export function CopyIt() 
{
  
    var copyText = document.getElementById("evar");
    copyText.select();
    copyText.setSelectionRange(0, 99999); 
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}

import './App.css';
import {generateString,CopyIt} from './logic.js';



var mail=generateString(9)


function App() {
  return (
   <> 
   <pre>
   <h1>This is Temporailry mail site </h1>
   <p>It helps you Access your Anynomyous mail without logins Required </p>
   </pre>
   <nav className="navbar navbar-light bg-light">
      <form className="container-fluid">
        <div class="input-group">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" id="evar" class="form-control" value={mail} aria-label="Username" aria-describedby="basic-addon1"></input>
        <button onClick={CopyIt()}>Copy text</button>
        </div>
      </form>
    </nav>

   </>
  );
}

export default App;

const characters='abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzo123456789'；
导出函数生成器限制（长度）
{
让结果=“”；
让addr=“@example.com”；
const charactersLength=characters.length；
for（设i=0；i

在我的App.js中，我使用一个按钮调用CopyIt（）函数来复制通过genrateString函数生成的输入字段的值

下面是我的应用程序js的样子

const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
export function generateString(length) 
{
    let result = ' ';
    let addr = "@example.com";
    const charactersLength = characters.length;
    for ( let i = 0; i < length; i++ ) 
    {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    result=result+addr;

    return result;
}

export function CopyIt() 
{
  
    var copyText = document.getElementById("evar");
    copyText.select();
    copyText.setSelectionRange(0, 99999); 
    document.execCommand("copy");
    alert("Copied the text: " + copyText.value);
}

import './App.css';
import {generateString,CopyIt} from './logic.js';



var mail=generateString(9)


function App() {
  return (
   <> 
   <pre>
   <h1>This is Temporailry mail site </h1>
   <p>It helps you Access your Anynomyous mail without logins Required </p>
   </pre>
   <nav className="navbar navbar-light bg-light">
      <form className="container-fluid">
        <div class="input-group">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" id="evar" class="form-control" value={mail} aria-label="Username" aria-describedby="basic-addon1"></input>
        <button onClick={CopyIt()}>Copy text</button>
        </div>
      </form>
    </nav>

   </>
  );
}

export default App;

import'/App.css'；
从'/logic.js'导入{generateString，CopyIt}；
var邮件=发电限制（9）
函数App（）{
返回(
这是临时邮件网站
它可以帮助您无需登录即可访问Anynomyous邮件

@
复制文本
);
}
导出默认应用程序；

现在，当我尝试运行此应用程序时，终端中没有编译错误 但在页面本身上显示为类型错误 这是附件中的照片

---

REACT在渲染时直接调用

CopyIt（）

。您必须处理这样一个事实：此时输入元素还不存在

您可以通过if检查来解决此竞争条件

---

它是直接遇到错误还是点击时？@Lynx242当页面加载时直接遇到错误编译终端上没有错误，但当我切换到网页时，它显示类型错误，实际上它在第一批时间内工作正常，在我删除一行后，它导入了不必要的徽标，但没有使用，因此我删除了它，并删除了它StartGiving Me错误我撤消了一些操作，但实际上没有一个对我有效。不必要的行是从“/logo.svg”导入徽标，它与LogicOK无关，明白了。我贴出了答案。Thnx它实际上起作用了@lynx242不客气。