React：从 uuid 开始不推荐使用深度要求，请要求顶级模块

Question

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

index.js:1const uuidv4 = require('uuid/v4');从 uuid@7.x 开始，不推荐使用需要 like 的深度。使用 Node.js CommonJS 模块时请要求顶级模块或捆绑浏览器时使用 ECMAScript 模块

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;

我尝试使用 'import { v4 as uuidv4 } from 'uuid'；uuidv4();'

但是我的按钮不会出现，我会得到错误：

未捕获的 ReferenceError：未定义 uuid

也许我应该得到这个错误？目前一切正常吗？

Answer 1

这在最近更新库后发生了变化，现在您可以根据库描述导入 uuid：“从 uuid@7 开始，这个库现在提供 ECMAScript 模块构建，它允许像 Webpack 和 Rollup 这样的打包器进行“tree-shaking”以删除死代码。相反，使用导入”import { v4 as uuid_v4 } from "uuid";uuid_v4()...或者对于 CommonJS：const { v4: uuid_v4 } = require('uuid');uuid_v4();

Answer 2

您可以改用react&nbsp;-uuidnpm&nbsp;i&nbsp;react-uuid用法import&nbsp;uuid&nbsp;from&nbsp;"react-uuid";