英文:
UseReducer dispatch getting called twice
问题
以下是您要的代码部分的翻译：
我有以下这段代码，但是usereducer的dispatch方法被调用了两次。我查阅了相关资料并从index中移除了strict模式。现在方法被正确调用和运行，但UI没有以更新后的值渲染出来。有人可以帮忙吗？
import React, { useReducer, useState } from "react";
import "../App.css";
const initialState = [
{ time: "17:00", slots: 3 },
{ time: "18:00", slots: 4 },
{ time: "19:00", slots: 2 },
{ time: "20:00", slots: 4 },
{ time: "21:00", slots: 3 },
{ time: "22:00", slots: 2 },
];
const reducer = (state, action) => {
switch (action.type) {
case "update": {
let index = state.findIndex((x) => x.time === action.value);
console.log(index);
if (state[index].slots > 0) {
state[index].slots -= 1;
}
console.log(state);
return state;
}
}
};
function Reservations() {
const [availableTimes, dispatch] = useReducer(reducer, initialState);
const handleSubmit = (e) => {
e.preventDefault();
dispatch({ type: "update", value: time });
};
return (
<>
<label htmlFor="res-time">Choose time</label>
<select
id="res-time "
value={time}
onChange={(e) => setTime(e.target.value)}
>
{availableTimes.map((availableTime) => {
return (
<option key={availableTime.time} value={availableTime.time}>
{availableTime.time} - {availableTime.slots} slots available
</option>
);
})}
</select>
</>
);
}
export default Reservations;
在我的index.js中，我已经移除了strictmode：
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
// </React.StrictMode>
);
英文:
I have the following piece of code and the usereducer disptach method is getting called twice. I read up on this and removed the strict mode from index. Now the method is called and run properly but the UI is not getting rendered with the updated value. Can someone please help?
import React, { useReducer, useState } from "react";
import "../App.css";
const initialState = [
{ time: "17:00", slots: 3 },
{ time: "18:00", slots: 4 },
{ time: "19:00", slots: 2 },
{ time: "20:00", slots: 4 },
{ time: "21:00", slots: 3 },
{ time: "22:00", slots: 2 },
];
const reducer = (state, action) => {
switch (action.type) {
case "update": {
let index = state.findIndex((x) => x.time === action.value);
console.log(index);
if (state[index].slots > 0) {
state[index].slots -= 1;
}
console.log(state);
return state;
}
}
};
function Reservations() {
const [availableTimes, dispatch] = useReducer(reducer, initialState);
const handleSubmit = (e) => {
e.preventDefault();
dispatch({ type: "update", value: time });
};
return (
<>
<label htmlFor="res-time">Choose time</label>
<select
id="res-time "
value={time}
onChange={(e) => setTime(e.target.value)}
>
{availableTimes.map((availableTime) => {
return (
<option key={availableTime.time} value={availableTime.time}>
{availableTime.time} - {availableTime.slots} slots available
</option>
);
})}
</select>
</>
);
}
export default Reservations;
In my index.js, I have removed the strictmode
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
// </React.StrictMode>
);
答案1
得分: 1
React期望不可变的更新。不要直接通过赋值来更改状态；而是制作副本来表示下一个状态。
return state.map(x => x.time !== action.value ? x :
{...x, slots: Math.max(0, x.slots - 1)});
英文:
React expects immutable updates. Do not directly change the state by assigning to it; instead make copies to represent the next state.
return state.map(x => x.time !== action.value ? x :
{...x, slots: Math.max(0, x.slots - 1)});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论