我想创建一个购物车，其中包含用户添加的产品列表并将其保存在 localStorage 中。如果我们有 RTK 查询的代码，是否可以在 createApi() 中定义该购物车？如果没有，我怎样才能在另一个切片中使用它？
export const productApi = createApi({
reducerPath: "productApi",
baseQuery: fetchBaseQuery({ baseUrl: "http://127.0.0.1:8000/api/" }),
tagTypes: ["Products"],
endpoints: (builder) => ({
SingleProduct: builder.query<IProduct, number>({
query: (id) => `product/${id}/`,
providesTags: (result, error, id) => [{ type: "Products", id }],
}),
}),
});
如果无法直接将购物车操作添加到 createApi，我如何提取 SingleProduct 并在此切片中使用它？
const cartSlice = createSlice({
name: "cart",
initialState,
reducers: {
addToCart: (state, action: PayloadAction<{ id: number, qty: number }>) => {
const data = // what should i put here?
state.push(data);
localStorage.setItem("cartItems", …我需要将状态从 useState 挂钩传递到另一个组件，但它们之间的唯一连接是一个具有 onClick 历史记录函数的按钮。推（路线）。
\n表页面（从该页面我必须将状态发送到下面的 TableMore 页面）
\nimport React, { useState, useEffect } from "react";\nimport { useTable, usePagination } from "react-table";\nimport { useHistory } from "react-router-dom";\nimport styled from "styled-components";\nimport apiRequest from "helpers/apiRequest";\nimport Header from "../../../components/Header/Header";\n\nfunction Table({ columns, data, searchData, setsearchData, getData }) {\n // Use the state and functions returned from useTable to build your UI\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n prepareRow,\n page, // Instead of using 'rows', we'll use page,\n // which has only the rows …在我的 React 应用程序中，我有一个 .env 文件，每次更改它们时，我都看不到更改，直到我停止并再次 npm start 是否有更快的方法？
正在努力学习测试。使用测试库、Jest、React-Router v6 和 Typescript。我正在尝试找出如何测试链接。我一直在到处寻找解决方案，但找不到。使用 React-Router v6。代码如下所示（链接只是带有 href 的常规元素），只是想确保用户到达新页面（在本例中是来自忘记密码页面的登录页面）。
//omitted imports but imported all appropriate items from below
describe('ForgotPassword', () => {
test('User can navigate to login screen', async () => {
render(
<MemoryRouter initialEntries={['/forgot-password' ]}>
<ForgotPassword />
</MemoryRouter>)
userEvent.click(screen.getByRole('link', { name: 'Back to Login' }))
await waitFor(() => {
expect(screen.getByRole('heading', { name: 'Login' })).toBeInTheDocument()
})
})
//also tried:
describe('ForgotPassword', () => {
test('User can navigate to login screen', async () => {
render(
<MemoryRouter initialEntries={['/forgot-password' ]}>
<Routes>
<Route path='/forgot-password' component={<ForgotPassword …我是一个反应初学者，刚刚开始主题react-router-dom教程。首先，我使用安装了react-router-dom， npm i react-router-dom
然后在app.js中，我使用函数标头中的默认代码，并在react-router-dom结构中调用此元素：
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router,Routes,Route} from "react-router-dom";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Header />} />
</Routes>
</Router>
);
}
export default App;
function Header(){
return(
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Edit <code>src/App.js</code> and save to reload.</p>
<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
Learn React
</a>
</header>
</div>
);
}
当我使用启动服务器时npm start出现此错误：
log.js:59 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): …我是反应初学者。我正在尝试设置路由器和渲染来更改页面，但它给了我我无法理解的错误。
我已经安装到npm install react-router-dom
我的终端index.js我已经导入BrowserRouter并嵌入了我的应用程序
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom"
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
在我的文件中，app.js我有从 导入路由开关react-router-dom。
import Home from './page/home';
import Authentication from "./page/authentication";
import Header from './componenti/header';
import './App.css';
import DashboardComponent from './page/dashboardComponent';
import {Route, Switch} from "react-router-dom"
function App(props) {
return (
<div>
<Header/>
<Switch>
<Route …大约 15 天前我开始学习 React。以下代码正确添加帖子，但不重定向到“/”。我正在使用react-router-dom v6。
render(){
return <div>
<Routes>
<Route exact path="/" element={
<div>
<Title title={'Arijit - Photowall'}/>
<Photowall posts={this.state.posts} onRemovePhoto={this.removePhoto} />
</div>
} >
</Route>
<Route path="/addPhotos" element={
<AddPhoto onAddPhoto={(addedPost)=>{
this.addPhoto(addedPost)
}}
>
<Navigate to="/" />
</AddPhoto>
}/>
</Routes>
</div>
}
建议使用哪种方式使用 RTK 查询按顺序执行多个突变？
const [
updateProfile,
] = useUpdateProfileMutation();
const [
updatePost,
] = useUpdatePostMutation();
const performMutipleMuations = async () => {
const data= await updateProfile(newData);
await updatePost(data);
};
我正在尝试将 url 中的参数渲染为网站中的 h2 。但即使当我尝试 console.log useParams 也是空的。
这是我的 Router.js 文件
const Webpages = () => {
return (
<Router>
<Routes>
<Route exact path="/" element={Home()} />
<Route exact path="/comics" element={Comics()} />
<Route path='/comics/:comicId' element={Comic()} /> <--------------
<Route exact path="/portfolio" element={Portfolio()} />
<Route exact path="/blog" element={Blog()} />
<Route exact path="/contact" element={Contact()} />
<Route exact path="/store" element={Store()} />
<Route path="*" element={NotFound()} />
</Routes>
</Router>
);
};
export default Webpages;
这是我的漫画组件
import React from 'react';
import NavBar from '../../components/NavBar';
import { useParams } …来自 redux 教程：
Run Code Online (Sandbox Code Playgroud)const onSavePostClicked = async () => { if (canSave) { try { setAddRequestStatus('pending') await dispatch(addNewPost({ title, content, user: userId })) .unwrap() } catch (err) { console.error('Failed to save the post: ', err) } finally { setAddRequestStatus('idle') } } }
据我了解dispatch(addNewPost({ title, content, user: userId }))会返回这样的承诺：
const onSavePostClicked = async () => {
if (canSave) {
try {
setAddRequestStatus('pending')
await dispatch(addNewPost({ title, content, user: userId }))
.unwrap()
} catch (err) {
console.error('Failed to save the post: …