标签: reactjs

我正在使用DataGridMaterial-UI，我想将链接应用到每行的末尾。
但它显示如下：( [object Object])

我希望它显示像123456789记录的 id 一样，并成为/form/123456789...的链接，我Link从react-router-dom使用，但我无法弄清楚我缺少什么或DataGrid组件不是最合适的...我只想在每行末尾添加一个链接

这是我到目前为止尝试做的事情；

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import {
  DataGrid,
  GridToolbarContainer,
  GridColumnsToolbarButton,
  GridFilterToolbarButton,
} from '@material-ui/data-grid';
import { Container, Backdrop, CircularProgress } from '@material-ui/core';
import { Redirect, Link } from 'react-router-dom';
import { getAllForms } from '../actions/formActions';
import Message from '../layout/Message';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';

const useStyles = …

我不明白mergenavigation.navigate 的作用是什么

navigation.navigate({
   name: 'Home',
   params: { post: postText },
   merge: true,
});

代码参考取自https://reactnavigation.org/docs/params/

我使用jsoneditorNPM 库。jsoneditor包含一个svg加载via import 'jsoneditor/dist/jsoneditor.css';。但它给了我这个错误。看起来next.config.js没有正确加载 SVG。

ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
| <svg
|    xmlns:dc="http://purl.org/dc/elements/1.1/"

以下是我当前的 nextjs 配置。

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });
    return config;
  },
  ...withImages(withCSS({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: …

我刚开始使用“@reduxjs/toolkit”（版本“^1.5.1”）。

我正在尝试从状态数组（roundScore）中删除一个对象。使用 . 这通常是非常简单的事情filter()。由于某种原因，这不起作用，我不明白为什么。这是我的代码：

减速片：

import { createSlice } from "@reduxjs/toolkit";

export const roundScoreSlice = createSlice({
    name: "roundScore",
    initialState: {
        roundScore: [],
    },

    reducers: {
        deleteArrow: (state, action) => {
            console.log(`action.payload = ${action.payload}`); // returns correct id

            state.roundScore.filter((arrow) => arrow.id !== action.payload);
        },
    },
});

export const { deleteArrow } = roundScoreSlice.actions;

export default roundScoreSlice.reducer;

反应组件：

import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
import { useDispatch } from "react-redux";
import { …

还有许多其他具有相同标题的帖子，但其中大多数已经过时，并且答案对我不起作用。以下是我尝试过但失败的一些修复：

• “反应本机启动--重置缓存”
• “npm开始--重置缓存”
• “npm 运行 android --reset-cache”
• “cd android -> gradlew clean -> cd..”
• 删除并重新安装node_modules文件夹
• 在更新react-native并执行/npm审核修复之前和之后删除并重新安装node_modules文件夹。据说有0个漏洞
• 纱线安装和纱线升级

当我尝试运行它时，即使重新启动计算机后也会出现此问题。我使用npm run android来启动应用程序。我注意到，在它停止工作的时候，我不小心向项目中添加了一些打字稿文件，而没有任何其他包。我已经删除了它们，但这有可能是造成这种情况的原因吗？我不认为它是条目文件路径的问题，因为错误状态如下所述。

有谁有其他想法如何解决它？如果需要更多代码片段，请告诉我。如有任何进一步的问题或建议，我们将不胜感激

我的 getJSMainModuleName() 返回的“index”应该是正确的，因为这在过去的项目中工作过，这让我相信它可能不是像错误所说的那样不正确的条目文件路径。

这是我执行“npm run android”时来自 Metro 的完整控制台输出。我不认为循环或引用错误导致了不变性违规。

 BUNDLE  ./index.js

 WARN  Require cycle: src\component\FeedList.js -> src\component\FeedCell.js -> src\component\TagDetail.js -> src\component\FeedList.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
 ERROR  ReferenceError: Can't find variable: i
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling …

我正在尝试测试 useQuery 挂钩。测试 (expect(screen.getByText(/Loading.../)).not.toBeInTheDocument()) 似乎失败。我只是不断在 dom 中加载文本，而不是标题。尽管mockResolved已被分配/知道为什么会发生这种情况吗？整个目标是测试 isLoading 和 isError。下面是代码

索引.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

应用程序

import React, { useState, Fragment } from "react";
import { useQuery } from "react-query";
import { getManagers } from "./api/index";
import CustomInputSelect from "./components/CustomInputSelect";
import { processEmployeeData } from "./utils/index";
import "./App.scss";

const App …

我正在使用 React 并且尝试使用@reach/router，但是当我尝试为控制台安装时，出现此错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: curso-platzi-react-avanzado@1.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm ERR! node_modules/@reach/router
npm ERR!   @reach/router@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this …

我的代码是：

    useEffect(() => {
        document.querySelector('body').style['background-color'] = 'rgba(173, 232, 244,0.2)';
        window.$crisp.push(['do', 'chat:hide']);

        return async () => {
            window.$crisp.push(['do', 'chat:show']);
            document.querySelector('body').style['background-color'] = '#ffffff';
            if (router.query.id) {
                const resDoc = await firebase.firestore().doc(`documents/${router.query.id}`).get();
                if (resDoc.exists) {
                    await clearDocPrediction(router.query.id);
                }
            }
        };
    }, []);

现在我返回的原因是因为我相信它在卸载时执行函数清理，所以我需要保留它。这是某种构建错误，我不太确定如何解决。任何帮助将不胜感激。

常规 JS 函数、辅助/服务函数和 React Custom Hook 之间有什么区别？

我发现的类似答案没有给出任何好的示例，因此我创建了这个“服务”函数，我将使用它来列出其他函数组件中的一些用户：

import axios from "axios";

const useService = () => {
  const fields = [
    { key: "name", _style: { width: "40%" } },
    { key: "email", _style: { width: "40%" } },
  ];

  const getUsers = async () => {
    return await axios.get("http://127.0.0.1:8000/api/users");
  };

  const getBadge = (status) => {
    switch (status) {
      case "Active":
        return "success";
      case "Inactive":
        return "secondary";
      case "Pending":
        return "warning";
      case "Banned":
        return "danger";
      default:
        return "primary"; …

我正在尝试设置 monorepo 以立即运行所有 Jest 测试。在每个包中，我都使用react-app-rewired来让 Babel 转译从其他包导入的代码，而无需从 create-react-app 中弹出，如本文所述。

react-app-rewired test从每个包文件夹运行时成功，但从 monorepo 的根文件夹运行时，出现此错误

Directory /Users/Me/go/src/gitlab.com/my-org/front-end/src in the roots[0] option was not found.

src我的文件夹（monorepo 根目录）中没有文件夹front-end，我不明白为什么 Jest 试图在那里查找。

我尝试过提供rootDirand rootsin jest.config.js，但这似乎没有什么区别。

如何让 Jest 停止查找不存在的文件夹？

jest.config.js（根）：

module.exports = {
  rootDir: ["."],
  projects: [
    "<rootDir>/packages/app",
    "<rootDir>/packages/components",
    "<rootDir>/packages/utils",
  ],
};

package.json（根）：

{
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier …