使用faker.js创建假数据时出错

Question

首先，我使用命令 npm faker安装faker。

现在我正尝试在上运行我的npm服务器

npm运行启动。

但是我得到了以下错误。有谁能帮我一下吗?谢谢。

**与问题一起汇编:X

在./src/ ERROR /Context.js 5:0-26中出错

模块未找到:错误:无法解析购物车应用程序中的“faker”\src\上下文**

import React, { createContext } from 'react';
import faker from "faker";

const Cart = createContext();
faker.seed(20);

const Context = ({ children }) => {
    
    const products = [...Array(20)].map(() => ({
        id: faker.datatype.uuid(),
        name: faker.commerce.productName(),
        price: faker.commerce.price(),
        image: faker.random.image(),
        inStock: faker.random.arrayElement([0, 3, 5, 6, 7]),
        fastDelivery: faker.datatype.boolean(),
        ratings: faker.random.arrayElement([1, 2, 3, 4, 5]),
      }));

      console.log(products);

  return (
    (
        <Cart.Provider >
          {children}
        </Cart.Provider>
      )
  )
}

export default Context;

Answer 1

首先，不推荐faker删除您的旧包。

npm uninstall faker

那就换个新的包

npm install @faker-js/faker --save-dev

然后像这样进口

import * as faker from 'faker';

import * as faker from '@faker-js/faker';

查看这里以获得更多信息

Answer 2

npm install --save-dev faker@5.5.3

这将解决这个问题。

Answer 3

import { faker } from '@faker-js/faker';

//single random user profile generator
function randomProfile() {
    return {
        userId: faker.datatype.uuid(),
        username: faker.internet.userName(),
        email: faker.internet.email(),
        avatar: faker.image.avatar(),
        password: faker.internet.password(),
        birthdate: faker.date.birthdate(),
        registeredAt: faker.date.past(),
    }
}

//define a method to generate users up to 'max_size' amount
const profile = function (max_size) {
    const  users = [];
    for (let index = 0; index < max_size; index++) {
        users.push(randomProfile());
    }
    return users;
};

// actually generate 10 random user profiles & load them in 'users_group' variable
const users_group = profile(10);


const Home = () => {
  return (
    <View style={{flex: 1, backgroundColor: '#fff'}}>
        <StatusBar hidden/>
         {/* out of the 10 user profile generated use the avatar(Image) of the first user*/}
        <Image source={users_group[1].avatar} />

         {/* out of the 10 user profile generated use the second avatar(Image) of the first user*/}
        <Image source={users_group[2].avatar} />
        <Text>Hello{profile.avatar}</Text>
    </View>
  )
}