我有一个非常简单的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;
});
当前,您正在对状态变量进行突变并推入可能导致副作用的数组中。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句