天道酬勤,学无止境

reactjs

react-router-dom Link onclick get the path

I trying to handle the path when I click <Link/> and I need using e.preventDefault(); for prevent animations inside the router so this is my code,basically I can not capture the location path for change the history target: import React from 'react'; import { Link } from "react-router-dom"; export default class NavTransitions extends React.Component { constructor(props) { super(props); this.changeRoutePath=this.changeRoutePath.bind(this); } changeRoutePath(e){ e.preventDefault(); this.props.history.push(this.match.path); console.log('this.match.path '+this.match.path); console.log(

2022-01-25 05:42:23    分类:问答    reactjs   react-router   react-router-dom

React Router + back button is resetting my app state

I'm using React Router Dom and the BrowserRouter object to enable browser based navigation for a site I'm building. Navigation works well, but if a user hits the back button, the entirety of my App's state is wiped clean. I'm not sure why this is happening. I've tried searching around, but all of the answers I've found don't mention why App state is getting reset. Here's my implementation: <BrowserRouter> <Switch> <Route path="/" exact render={()=><LandingPage/>} <Route path="/about" render={()=><About/>} </Switch> </BrowserRouter> Am I doing something glaringly wrong? Could anyone with

2022-01-25 05:41:31    分类:问答    reactjs   react-router

redux store not found and not able to render a component for a specific path in React

I am implementing a password reset functionality in a MERN app. When a user enters the email address for which they want to reset the password, they get a rest password link in their mail. Now, when they visit that link, they should see the PasswordResetFormSecond component rendered on the screen. (irrespective of whether the token is valid or not). However, when I am visiting the path "/account/reset/:token", I don't see the PasswordResetFormSecond being rendered on the screen. I get the correct server responses however. Also, the redux store is not found. What am I doing wrong? Code snippets

2022-01-25 05:35:43    分类:问答    reactjs   authentication   redux   mern   redux-toolkit

Get cookie on front-end

I use on back-end nodejs(nestjs). From the server i send the cookies after login: res.cookie('token', 'token', { httpOnly: true }); And this is my cors setting app.enableCors({credentials: true });; As front-end i use reactjs. After login the server sent the cookies here: But i need to get the cookies here: Why i don't get the cookies in the place where i showed and how to get them there to save them even o reloading the page?

2022-01-25 05:32:46    分类:问答    node.js   reactjs   nestjs

Material-UI: Cannot delete input value because of losing focus inside DataGrid

I'm trying to use Material-UI DataGrid. I want to use a button inside one of the columns of the table. This button has to be a Modal with form inside. When I did it I noticed that I can typing in form inputs, but I can't delete with delete key and backspace, because focus lost and how I understood it focus was on the table, but not on the modal input. Using default examples from documentation I did a simple example on CodeSandbox. Input from there has the same behavior. PS. Try to type something and backspace then. Do you have any idea?

2022-01-25 05:28:17    分类:问答    reactjs   input   datagrid   material-ui   focus

Redux 更新嵌套数据 [不可变更新模式](Redux updating nested data [Immutable Update Patterns])

问题 任何人都可以帮助解决此更新模式。 我没有使用任何像 immer 这样的库。 我必须更新一个嵌套对象,数据看起来像 dis 样本数据 { isFetching: false data:{ nba : { stack :{ 1:[] } } } } 我的减速机 { ...state, isFetching: false, data: { ...state.data, [action.payload.team]: { ...state[action.payload.team], [action.payload.framework]: { ...state[action.payload.framework], [action.payload.build]: action.payload.resp } } } }; 我可以更新到第二级,但无法更新第三个孩子。 任何人都可以阐明我想念它的地方。 我在codesandbox上放了一个demo。 https://codesandbox.io/s/todos-0ygrs 单击折叠和内部折叠项目。 我正在下面的控制台中记录状态的更改。 正如您在上一级看到的,内部版本号正在被新版本号所取代。 当前行为在您扩展 nba 和所有三个孩子之后 { nba: { stack:{ 3:[] } } 预期行为:扩展堆栈和所有三个孩子之后 { nba: {

2022-01-25 05:20:17    分类:技术分享    reactjs   ecmascript-6   redux   immutability

未处理的拒绝 (ChunkLoadError):加载块 1 失败(Unhandled Rejection (ChunkLoadError): Loading chunk 1 failed)

问题 我基本上是在尝试将我的主应用程序的某些部分提取到一个单独的包中。我在我的 git repo myapp- poc -ui 中构建了一个示例单独的包。 现在我试图在我的main application. package.json : "dependencies": { "myapp-poc-ui": "git+https://github.com/prabhatmishra33/myapp-poc-ui#master", "react": "^16.10.1", "react-dom": "^16.10.1", "react-scripts": "3.2.0" }, 我正在通过以下方式访问主应用程序中的导出模块: import React from 'react'; import './App.css'; import { HelloWorld } from "myapp-poc-ui"; import { LazyComponent } from "myapp-poc-ui"; function App() { return ( <div> <HelloWorld /> <LazyComponent /> </div> ); } export default App; 问题:我的浏览器出现问题 Uncaught SyntaxError: Unexpected token '<

2022-01-25 05:15:12    分类:技术分享    reactjs   webpack   webpack-dev-server   git-submodules   react-loadable

无法访问使用 useState 挂钩复制的数据(Unable to access data which is copied using useState hook)

问题 我无法将数据复制到 elemnents 我在这里做错了什么? 我是反应新手。 这是一个json import React, { useEffect, useState } from 'react'; import './App.css'; import axios from 'axios'; function App() { const [elements, setElements] = useState([]); useEffect(() => { const res = async () => { const result = await axios.get('/data'); const data = result.data; setElements(elements => [...elements, data]); }; res(); }, []); console.log(elements.map(element => console.log(element))); return ( <div className='App'> Hello {elements.map(element => ( <div key={element._id}>{element.name}</div> ))} </div> ); } export default App; 回答1

2022-01-25 05:11:47    分类:技术分享    javascript   reactjs

是否可以将材料表列的顺序保存到数据库以保持其持久性?(Is it possible to save the order of the column of material table to a database to keep it persistent?)

问题 我希望我的用户能够拖动材料表上的列并保持该状态持久。 我可以随时获得我的专栏的状态和他们的订单。 我确实救了他们。 但是,当我尝试使用已保存的列顺序进行渲染时,它似乎并没有更新我的材料表。 我正在使用来自 material-table.com 的 react Material-Table 这是我想要做的代码: const tableHeaders = []; tableHeaders.push({ title: 'a', field: 'a' }); tableHeaders.push({ title: 'b', field: 'b' }); tableHeaders.push({ title: 'c', field: 'c' }); const Table = (props) => { const [state, setState] = useState({ headers: tableHeaders, data: data // some data }); const handleColumnDragged = (start, end) => { // process the order of columns // create as an array i.e. order = [2, 1, 0] updateOrder(order); // save to

2022-01-25 05:11:42    分类:技术分享    reactjs   material-ui   material-table