Question

ReactJS-未捕获的RangeError：超出最大调用堆栈大小

2021-12-24

5176

reactjs uuid

我正在尝试从 YouTube 视频制作联系人管理器应用程序：

https://www.youtube.com/watch?v=0riHps91AzE&lc=Ugybk5M3ofjHsO8uHjd4AaABAg.9WHwkOL6qXV9WJu89p6VTV

每次我输入内容并单击“添加”时，都会弹出以下错误：屏幕截图主页

我在下载 uuidv4 时也收到“ 6 个中等严重程度漏洞 ”。（以防万一，如果它可能会有所帮助）

还收到“ 未找到模块：错误：无法解析'C:\Users\loki\OneDrive\Desktop\ReactJS-YouTube\contact-app\node_modules\uuidv4\build\lib 中的'util'”

这是我的所有文件：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>

App.js

import React, { useState, useEffect } from "react";
import { uuid } from "uuidv4";
import "./App.css";
import Header from "./Header";
import AddContact from "./AddContact";
import ContactList from "./ContactList";

function App() {
  const LOCAL_STORAGE_KEY = "contacts";
  const [contacts, setContacts] = useState([]);

  const addContactHandler = (contact) => {
    console.log(contact);
    setContacts([...contacts, { id: uuid(), ...contact }]);
  };

  const removeContactHandler = (id) => {
    const newContactList = contacts.filter((contact) => {
      return contact.id !== id;
    });

    setContacts(newContactList);
  };

  useEffect(() => {
    const retriveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
    if (retriveContacts) setContacts(retriveContacts);
  }, []);

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts]);

  return (
    <div className="ui container">
      <Header />
      <AddContact addContactHandler={addContactHandler} />
      <ContactList contacts={contacts} getContactId={removeContactHandler} />
    </div>
  );
}

export default App;

ContactList.js

import React from "react";
import ContactCard from "./ContactCard";

const ContactList = (props) => {
    console.log(props);

    const deleteContactHandler = (id) => {
        props.getContactId(id);
    };

    const renderContactList = props.contacts.map((contact) => {
        return(
          <ContactCard contact={contact} clickHandler = { deleteContactHandler } key = { contact.id}/>
        );
    })
    return(
        <div className="ui celled list">
            {renderContactList}
        </div>
    );
}

export default ContactList;

ContactCard.js

import React from "react";
import user from "../images/user.jpg";

const CardContact = (props) => {
    const {id, name, email} = props.contact;
    return(
        <div className="item">
            <img className="ui avatar image" src={user} alt="user" />
              <div className="content">
                  <div className="header">{name}</div>
                  <div>{email}</div>
              </div>
              <i className="trash alternate outline icon"
                style={{color:"red",marginTop:"7px"}}
                onClick={() => props.clickHandler(id)}>
              </i>
          </div>
    );
};

export default CardContact;

AddContact.js

import React from "react";

class AddContact extends React.Component {
  state = {
    name: "",
    email: "",
  };

  add = (e) => {
    e.preventDefault();
    if (this.state.name === "" || this.state.email === "") {
      alert("ALl the fields are mandatory!");
      return;
    }
    this.props.addContactHandler(this.state);
    this.setState({ name: "", email: "" });
  };
  render() {
    return (
      <div className="ui main">
        <h2>Add Contact</h2>
        <form className="ui form" onSubmit={this.add}>
          <div className="field">
            <label>Name</label>
            <input
              type="text"
              name="name"
              placeholder="Name"
              value={this.state.name}
              onChange={(e) => this.setState({ name: e.target.value })}
            />
          </div>
          <div className="field">
            <label>Email</label>
            <input
              type="text"
              name="email"
              placeholder="Email"
              value={this.state.email}
              onChange={(e) => this.setState({ email: e.target.value })}
            />
          </div>
          <button className="ui button blue">Add</button>
        </form>
      </div>
    );
  }
}

export default AddContact;

Answer 1

来自 uuidv4 npm 页面： 自版本 8.3.0 以来， uuidv4 模块的大部分功能已包含在 uuid 中，因此 uuidv4 模块的大部分功能已被标记为已弃用。

因此，在 App.js 中导入 uuidv4 模块会导致此错误。

您可以升级到最新版本的 uuid 库以消除此错误。

在项目目录中的终端中运行这些命令。

npm uninstall uuidv4
npm install uuid

现在，在 App.js 中导入 uuid 模块，而不是 uuidv4

import { v4 as uuid } from 'uuid';

现在，您可以使用 uuid() 函数创建 UUID

要了解有关 uuid 的更多信息，您可以查看其文档： https://github.com/uuidjs/uuid#quickstart

Answer 2

在您的 App.js 中：

在每个 useEffect （页面渲染）上，您都在调用 setContract ，在下面的 useEffect 上，您将该契约视为依赖项，因此当契约发生变化时它会进行渲染

 useEffect(() => {
    const retriveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
    if (retriveContacts) setContacts(retriveContacts);
  }, []);

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
  }, [contacts]);

Answer 3

使用命令 npm uninstall uuidv4 删除 uuidv4 并使用命令 npm install uuid 安装最新版本的 uuid 对我有用。

安装包后，将其导入为 import { v4 as uuid } from 'uuid' ;