React：从uuid开始不赞成使用深度要求，请使用顶层模块 [英] React: Deep requiring is deprecated as of uuid, Please require the top-level module

问题描述

我的React应用程序成功显示了按钮，但是收到了此错误。

my React app successfully shows the button however receiving this error.

index.js：1需要像 const uuidv4 = require（' uuid / v4'）; 从uuid@7.x开始不推荐使用。使用Node.js CommonJS模块时，请使用顶级模块；对于浏览器绑定时，请使用ECMAScript模块。

index.js:1 Deep requiring like const uuidv4 = require('uuid/v4'); is deprecated as of uuid@7.x. Please require the top-level module when using the Node.js CommonJS module or use ECMAScript Modules when bundling for the browser

import React, { Component } from 'react';
import { Container, ListGroup, ListGroupItem, Button } from 'reactstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import uuid from 'uuid/v4';

class ShoppingList extends Component {
    state = {
        items: [
            { id: uuid(), name: 'Eggs' },
            { id: uuid(), name: 'Milk' },
            { id: uuid(), name: 'Steak' },
            { id: uuid(), name: 'Water' },
        ]
    }

    render() {
        const { items } = this.state;
        return (
            <Container>
                <Button 
                 color="dark"
                 style={{marginBottom: '2rem'}}
                 onClick={() => {
                    const name = prompt('Enter Item');
                    if (name) {
                        this.setState(state => ({
                           items: [...state.items, { id: uuid(), name }] 
                        }));
                    }
                }}
                >Add Item</Button>
            </Container>
        );
    }
}

export default ShoppingList;

• 我尝试从'uuid中使用'import {v4 as uuidv4} '; uuidv4（）;'


• 但是我的按钮无法显示，并且会出现错误：


• 未捕获的ReferenceError：未定义uuid


• 也许我注定会收到此错误？


• I tried to use 'import { v4 as uuidv4 } from 'uuid'; uuidv4();'
• however my button would not show up and i would get error:
• Uncaught ReferenceError: uuid is not defined
• Perhaps i am meant to be getting this error? and everything is currently working fine?

推荐答案

您可以使用反应-uuid 代替

npm i react-uuid

使用

import uuid from "react-uuid";





---





在线试用：

---

Try it online:

< img src = https://codesandbox.io/static/img/play-codesandbox.svg alt =编辑Polished-silence-u7ut6>

这篇关于React：从uuid开始不赞成使用深度要求，请使用顶层模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！