Questions tagged «reactjs»

如何修复Could not find plugin "proposal-numeric-separator"，当我尝试构建我的React应用程序时出现此错误，但我尚未弹出该应用程序： ./src/index.js Error: [BABEL] /home/pc/Downloads/project/src/index.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/home/pc/Downloads/project/node_modules/babel-preset-react-app/index.js$0") at Array.map (<anonymous>) at Generator.next (<anonymous>) at Generator.next (<anonymous>) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. …

59 reactjs  build  yarnpkg 

升级到react-native 0.61之后，我收到很多类似的警告： VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. VirtualizedList-backed container我应该使用其他什么？为什么现在不建议那样使用？

38 javascript  reactjs  react-native 

以下是使用React useState Hook的标准方法： const [count, setCount] = useState(0); 但是，const count显然要将此变量重新分配给其他原始值。 为什么变量没有定义为let count？

33 javascript  reactjs  ecmascript-6  react-hooks 

问题出在这里：我试图在单击按钮时调用2个函数。这两个函数都会更新状态（我正在使用useState挂钩）。第一个函数将value1正确更新为'new 1'，但是在1s（setTimeout）之后触发，第二个函数将值2更改为'new 2'，但是！它将value1设置回'1'。为什么会这样呢？提前致谢！ import React, { useState } from "react"; const Test = () => { const [state, setState] = useState({ value1: "1", value2: "2" }); const changeValue1 = () => { setState({ ...state, value1: "new 1" }); }; const changeValue2 = () => { setState({ ...state, value2: "new 2" …

31 javascript  reactjs  react-hooks 

我正在开发一个简单的react-spring引导应用程序，但是由于GitHub问题，我使用IntelliJ重新创建了应用程序启动器文件，并使用先前应用程序的package.json文件的依赖项数据安装了节点模块。 如果我使用折叠的导航栏（汉堡栏->响应式导航栏，该导航栏在移动视图中折叠），然后单击“汉堡栏”按钮以查看导航链接，则会出现以下错误。但是所有这些事情在以前的应用程序中都进展顺利。 TypeError: Cannot convert object to primitive value HTMLDivElement.<anonymous> C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:346 343 | ...typeof config === 'object' && config ? config : {} 344 | } 345 | > 346 | if (!data && _config.toggle && /show|hide/.test(config)) { | ^ 347 | _config.toggle = false 348 | } 349 …

27 javascript  jquery  reactjs  bootstrap-4 

我试图弄清楚如何使用Firebase侦听器，以便使用React Hook更新来刷新云Firestore数据。 最初，我使用带有componentDidMount函数的类组件来获取Firestore数据。 this.props.firebase.db .collection('users') // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid)) .doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid)) .get() .then(doc => { this.setState({ name: doc.data().name }); // loading: false, }); } 当页面更新时，该中断了，因此我试图弄清楚如何移动侦听器以响应挂钩。 我已经安装了react-firebase-hooks工具-尽管我不知道如何阅读说明才能使其正常工作。 我有一个功能组件，如下所示： import React, { useState, useEffect } from 'react'; import { useDocument } from 'react-firebase-hooks/firestore'; import { BrowserRouter as Router, Route, Link, Switch, useRouteMatch, } from 'react-router-dom'; …

27 javascript  reactjs  firebase  google-cloud-firestore  react-hooks 

我正在部署一个React应用程序，但是当我通过https访问页面时遇到一个奇怪的错误。 当我通过https访问页面时，收到以下错误： SecurityError：无法构造“ WebSocket”：可能不会从通过HTTPS加载的页面启动不安全的WebSocket连接。 但是，当我通过http转到该页面时，它可以正常运行。 问题是，据我所知，我没有使用websockets。我在代码中进行了搜索，以查看是否有对HTTP的请求，该请求应该是https或ws：而不是wss：，但我什么都看不到。 有人遇到过吗？ 我包括package.json文件的副本。让我知道是否需要我上载任何其他代码来帮助调试。 提前致谢。 { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "baffle": "^0.3.6", "cross-env": "^6.0.3", "react": "^16.12.0", "react-dom": "^16.12.0", "react-player": "^1.14.2", "react-router-dom": "^5.1.2", "react-scripts": "3.3.0", "react-typist": "^2.0.5", "webpack-hot-dev-clients": "^2.0.2" }, "scripts": { "start": "cross-env react-scripts start", "build": …

25 node.js  reactjs 

在上react-native init ProjectName，主应用程序文件App.js通过以下方式包含组件的声明： const App: () => React$Node = () => {...} 该指令是什么意思？ 我的意思是，我习惯于将组件定义为const App = () => {...}，所以我尤其不理解之间的表达: () => React$Node。

23 javascript  reactjs  react-native 

由于某种原因，我无法使Material-UI日期选择器正常工作。每次在React中渲染日期选择器时，都会引发以下错误： RangeError：格式字符串包含未转义的拉丁字母字符 n 我只用日期选择器（https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js）创建了一个stackblitz，甚至出现了错误。我究竟做错了什么？我想我遵循了安装指南中的所有说明。 链接到material-ui / pickers：https : //material-ui-pickers.dev/

19 javascript  reactjs  material-ui  material-ui-pickers 

我是使用React的新手，所以这可能真的很容易实现，但是即使我做了一些研究，也无法自己解决。如果这太蠢了，请原谅我。 语境 我使用Inertia.js与Laravel（后端）和响应（前端）适配器。如果您不知道惯性，则基本上是： Inertia.js使您可以使用经典的服务器端路由和控制器快速构建现代的单页React，Vue和Svelte应用程序。 问题 我正在做一个简单的登录页面，其表单具有提交时将执行POST请求以加载下一页的形式。似乎工作正常，但在其他页面上，控制台显示以下警告： 警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消使用useEffect清理功能中的所有订阅和异步任务。 登录（由Inertia创建） 相关代码（为了避免不相关的行，我对其进行了简化）： import React, { useEffect, useState } from 'react' import Layout from "../../Layouts/Auth"; {/** other imports */} const login = (props) => { const { errors } = usePage(); const [values, setValues] = useState({email: '', password: '',}); const [loading, setLoading] = useState(false); …

19 javascript  reactjs  promise  inertia 

我正在使用几个星期前发布的React Router的新useHistory挂钩。我的React-router版本是5.1.2。我的React版本为16.10.1。您可以在底部找到我的代码。 但是，当我从react-router导入新的useHistory时，出现此错误： Uncaught TypeError: Cannot read property 'history' of undefined 这是由React-router中的这一行引起的 function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0; } return useContext(context).history; <---------------- …

18 reactjs  react-router  react-hooks  react-router-dom  react-context 

我指的是React Material-UI的文档（https://material-ui.com/components/autocomplete/）。 在演示代码中， <Autocomplete options={top100Films} getOptionLabel={(option: FilmOptionType) => option.title} style={{ width: 300 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" fullWidth /> )} /> 我知道它是如何工作的，但是我不确定应该如何获得选定的值。 例如，我想onChange对此使用道具，以便我可以根据选择进行一些操作。 我尝试添加 onChange={v => console.log(v)} 但v不会显示与所选值相关的任何内容。

17 javascript  reactjs  material-ui 

我在带有打字稿的React Router v5.1.2中使用UseHistory挂钩吗？运行单元测试时，我遇到了问题。 TypeError：无法读取未定义的属性“ history”。 import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () => { beforeEach(() => { const historyHistory= { replace: jest.fn(), length: 0, location: { pathname: …

17 reactjs  typescript  react-router  jestjs  enzyme 

我有一个大约2年前使用create-react-app创建的react应用（应用A），它已弹出。该应用程序已导出为commonjs2模块，并以NPM软件包的形式提供，以供next.js项目（应用程序B）使用。 一切都进行得很顺利，直到我更新了应用程序A中的某些程序包，其中包含一些我们使用的通用组件。导入应用B时的错误是未定义窗口，可能是由于SSR所致。 我通过使用在应用A的webpack配置中解决了此问题globalObject: 'this'。 现在，当我尝试在应用B中导入应用A时，错误消息为： TypeError: Cannot read property 'webpackJsonp' of undefined 我认为某处正在尝试致电window['webpackJsonp']？ 我已经尝试过更改webpackJsonpFunction，但是正如预期的那样，它将仅尝试获取undefined的其他属性。 任何帮助将不胜感激！ 全栈跟踪： [ error ] TypeError: Cannot read property 'webpackJsonp' of undefined at /Users/syberen/projects/parentcompany/pblx-store-detail/build/static/js/main.js:1:2087 at Object.<anonymous> (/Users/syberen/projects/parentcompany/pblx-store-detail/build/static/js/main.js:1:2203) at Module._compile (internal/modules/cjs/loader.js:776:30) at Module.m._compile (/Users/syberen/projects/parentcompany/companyname/node_modules/ts-node/src/index.ts:473:23) at Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Object.require.extensions.<computed> [as .js] (/Users/syberen/projects/parentcompany/companyname/node_modules/ts-node/src/index.ts:476:12) at Module.load (internal/modules/cjs/loader.js:643:32) at Function.Module._load …

16 reactjs  npm  webpack  next.js 

我已经MyStyledButton基于material-ui 编写了一个自定义按钮（）Button。 import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = props; return ( <Button classes={{ root: buttonStyle.root }} …

16 javascript  css  reactjs  jestjs  enzyme