React:从 uuid 开始不推荐使用深度要求,请要求顶级module

IT技术 javascript reactjs create-react-app uuid
2021-05-09 14:56:37

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

index.js:1const uuidv4 = require('uuid/v4');从 uuid@7.x 开始,不推荐使用深度要求喜欢使用 Node.js CommonJS module时请要求顶层module或为浏览器捆绑时使用 ECMAScript module

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
  • 也许我注定要收到这个错误?目前一切正常?
2个回答

这在最近更新库后发生了变化,现在您可以根据库描述导入 uuid:

“从 uuid@7 开始,这个库现在提供 ECMAScript module构建,它允许像 Webpack 和 Rollup 这样的打包程序进行“摇树”以删除死代码。相反,使用导入”

import { v4 as uuid_v4 } from "uuid";
uuid_v4()

...或对于 CommonJS:

const { v4: uuid_v4 } = require('uuid');
uuid_v4();

您可以使用react-uuid代替

npm i react-uuid

用法

import uuid from "react-uuid";

在线试一下:

编辑 Polish-silence-u7ut6