小编Ris*_*war的帖子

每当我运行 npm start 时，我都会收到此错误。我尝试了几个修复程序，但没有一个对我有用。我尝试将 autoprefixer 的版本更改为 9.8.6，但是没有用。请帮我解决这个问题

这是我的 package.json

{
  "name": "reactgallery",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ], …

我创建了一个 React 应用程序，然后将 Tailwind 集成到它。当我跑时npm start，我收到了这个错误。

TypeError: Object.entries(...).flatMap is not a function[![enter image description here][1]][1]
TypeError: Object.entries(...).flatMap is not a function
    at flattenColorPalette (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)
    at /media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53
    at plugins.forEach.plugin (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)
    at Array.forEach (<anonymous>)
    at _default (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
    at /media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/tailwindcss/lib/processTailwindFeatures.js:60:54
    at LazyResult.run (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/postcss/lib/lazy-result.js:225:14)
    at /media/rishi/142468BD2468A408/web/tailwind-react-demo/node_modules/postcss/lib/lazy-result.js:254:14
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tailwind-react-demo@0.1.0 watch:css: `postcss src/assets/tailwind.css -o src/assets/main.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tailwind-react-demo@0.1.0 watch:css …

我正在使用该react-pdf/renderer包添加从我的网站下载 pdf 的功能。但我收到此错误消息：./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').

我尝试使用这个包的不同版本，例如 v2.2.0、v2.3.0 和 v3.0.0，但不幸的是，没有任何效果。我在用着react v^17.0.2。

PDF文档代码：

import { Document, Page, StyleSheet, Text, View } from "@react-pdf/renderer";
import React from "react";

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

const InvoicePDF = () => {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <Text>Section #1</Text>
        </View>
        <View style={styles.section}> …

我正在尝试在 m1 MacBook 上安装自制程序，但每次尝试运行此命令时都会收到此错误消息。请任何人帮我解决这个问题。

我正在尝试使反应表可水平和垂直滚动，但现在它根据数据占用了所有空间。我想使该表格具有固定高度并可在两个方向上滚动。

表组件：

import React from "react";
import { useTable } from "react-table";

const Table = ({ columns, data }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      columns,
      data,
    });
  return (
    <table {...getTableProps()} className="text-center">
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                className="bg-primary-dark text-white p-4 text-center"
                {...column.getHeaderProps()}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody
        {...getTableBodyProps()}
        className="bg-primary-light text-primary-dark overflow-scroll"
      >
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return …

我尝试使用本指南安装 tailwindcss 3.0.1，但是当我将 tailwindcss 类添加到我的反应代码中时，它不起作用。我按照本指南集成 tailwind 进行反应：https://tailwindcss.com/docs/guides/create-react-app

我使用npx creat-react-app myApp而不是创建了一个反应应用程序npx create-react-app@next --scripts-version=@next --template=cra-template@next my-project

任何人请帮我解决这个问题。

我想知道有必要在反应表中使用 useMemo 来获取列和数据，如果是的话，为什么会这样？

这是我的代码：

import React, { useMemo } from "react";
import useData from "../../hooks/useData";
import Table from "./Table";

import Loader from "../../assets/imgs/loader.svg";

const TableSection = React.memo(({ query, isOpen }) => {
  const { data, runtime, error } = useData(query);

  const column =
    data.length > 0 &&
    Object.keys(data[0]).map((key) => {
      const result = data[0][key]
        .replace(/([A-Z]+)/g, " $1")
        .replace(/([A-Z][a-z])/g, " $1");
      return {
        Header: result,
        accessor: key,
      };
    });
  const columns = useMemo(() => column, [column]);
  const queryData = useMemo(() => …

我正在尝试将react-router-dom从v5升级到v6，但收到此错误消息。

Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

任何人请帮我解决这个问题。

index.js 文件代码

import React from "react"
import ReactDOM from "react-dom"
import "./assets/main.css"
import App from "./App"
import { BrowserRouter } from "react-router-dom"
import { AuthContextProvider } from "./context/AuthContext"

ReactDOM.render(
  <React.StrictMode>
    <AuthContextProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </AuthContextProvider>
  </React.StrictMode>,
  document.getElementById("root")
)

App.js 文件代码

import React, { Suspense } from "react"
import { Routes, Route } from "react-router-dom"
import "./App.css"
import { Helmet …

我网站的一位用户在尝试从他的 chrome 浏览器（移动设备）在我的 React 网站上使用 GitHub 进行注册时遇到了错误消息。我已将 Firebase GitHub 登录与弹出方法集成。

由于缺少初始状态，无法处理请求。如果浏览器 sessionStorage 无法访问或意外清除，则可能会发生这种情况。

注册代码：

import { useEffect, useState } from "react"
import { GithubAuthProvider, signInWithPopup } from "firebase/auth"

import { auth } from "../firebase/config"
import { createUserProfileDocument } from "../firebase/createUserProfileDocument"

import { useAuthContext } from "./useAuthContext"

export const useSignup = () => {
  const [error, setError] = useState(false)
  const [isPending, setIsPending] = useState(false)
  const [isCancelled, setIsCancelled] = useState(false)
  const provider = new GithubAuthProvider()
  const { dispatch } = useAuthContext()

  const …