reactjs - 数据在按钮 onClick 事件上更新两次
问题描述
我有一个非常简单的React Web App
地方,我想在其中添加新object
的:-review
array
object
我useReducer
用来处理state
我的数据的默认值,如下所示: -
reducer
功能:-
const reducer = (state, action) => {
switch (action.type) {
case "ADD_REVIEW_ITEM":
state.forEach(
(data) =>
data.id === action.payload.selectedDataId &&
data.listOfReview.push(action.payload.newReview)
);
return [...state];
default:
return state;
}
};
default data
对于我的reducer
:-
const data = [
{
id: 1607089645363,
name: "john",
noOfReview: 1,
listOfReview: [
{
reviewId: 1607089645361,
name: "john doe",
occupation: "hero",
rating: 5,
review: "lorem ipsum"
}
]
},
{
id: 1507089645363,
name: "smith",
noOfReview: 1,
listOfReview: [
{
reviewId: 1507089645361,
name: "smith doe",
occupation: "villain",
rating: 5,
review: "lorem ipsum"
}
]
}
];
App.js
,正在发生的事情的演示:-
import React, { useState, useEffect, useReducer } from "react";
import "./styles.css";
export default function App() {
const [state, dispatch] = useReducer(reducer, data);
// hnadle adding of new review
const handleAddNewReview = (id) => {
dispatch({
type: "ADD_REVIEW_ITEM",
payload: {
selectedDataId: id,
newReview: {
reviewId: new Date().getTime().toString(),
name: "doe doe",
occupation: "doctor",
rating: 5,
review: "lorem ipsum"
}
}
});
};
return (
<>
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
{state?.length > 0 &&
state.map((data) => (
<div key={data.id}>
<h1>{data.name}</h1>
{data.listOfReview?.length > 0 &&
data.listOfReview.map((review) => (
<div key={review.reviewId}>
<h3>{review.name}</h3>
<p>{review.occupation}</p>
</div>
))}
<button onClick={() => handleAddNewReview(data.id)}>
Add new review
</button>
</div>
))}
</>
);
}
问题是,一旦我第一次单击button
,就会正确更新。但是,如果我第二次单击它,它会以某种方式增加两个相同的值。我应该如何更改以解决此问题?state
review
code
reducer
这是所述案例的工作沙箱。
解决方案
尝试将减速器更改为:
case "ADD_REVIEW_ITEM":
return state.map((data) => {
if (data.id === action.payload.selectedDataId) {
return {
...data,
listOfReview: [...data.listOfReview, action.payload.newReview]
};
}
return data;
});
目前,您正在改变状态变量并推入一个可能导致副作用的数组。
推荐阅读
- c++ - Visual Studio C++ 在 main 函数结束时触发断点
- github - 找不到从 GitHub webhook 响应创建 SHA256 的格式
- android - 错误:java.lang.ArrayIndexOutOfBoundsException:长度=5;指数=5
- sql - 如何获得人口数量最多的国家/地区人口最多的城市
- php - php 和 Ajax:当我选择主类别时自动显示子类别
- reactjs - 反应表单复选框删除或添加,第一次交互时不更新
- java - Hikari 数据源打开连接超过最大池大小限制
- xcode - SwiftUI:.fileExporter 仅导出 1 个文档
- ios - swift UIDatePicker 限制日期范围选择
- c++ - c++ 代码没有给出输出(主题:递归和二维向量)