使用react钩子更新部分状态

Question

我有一个事件处理程序，每次单击它，我的应用程序都会崩溃。该问题与Else语句之后的部分有关。我想要实现的是：我有一个有3个按钮的页面，单击1个按钮后，它会在状态数组中添加一个对象，并将用户发送到下一个页面，在那里他有其他具有相同功能的按钮。如果用户在浏览器中单击"返回"并再次单击按钮，我希望覆盖对象相对于该页面的价格。对不起，我不知道如何更好地表达自己。

`import React, { useContext } from "react";
import { PagesContext } from "../model/PagesContext";
import {
MainWrapper,
MainText,
ButtonsWrapper,
Icon,
SelectionsContainer,
ButtonLabel
} from "../StyledComponents";
const Choices = ({ pagename, values }) => {
const [price, setPrice, history] = useContext(PagesContext);
const checker = price.some(item => item.url === history.location.pathname);
const AddPrice = e => {
values.forEach(element => {
if (element.id === e.target.id && !checker) {
setPrice([
...price,
{ price: element.price, url: history.location.pathname }
]);
history.push(element.next);
} else {
setPrice(
price.forEach(obj => {
if (checker && element.id === e.target.id) {
obj.price = element.price;
}
})
);
history.push(element.next);
}
});
};
return (
<MainWrapper>
<MainText>{pagename}</MainText>
<ButtonsWrapper>
{values.map(button => (
<SelectionsContainer key={button.id}>
<Icon
onClick={AddPrice}
src={"/svg-icons/" + button.icon}
id={button.id}
style={{ width: "100px", height: "100px" }}
/>
<ButtonLabel>{button.name}</ButtonLabel>
</SelectionsContainer>
))}
</ButtonsWrapper>
</MainWrapper>
);
};
export default Choices;
`

Answer 1

如果要用一些依赖于旧状态的新状态值更新状态，则应使用以下方法：

setState((prevState) => {
// Do whatever you need to the last state
// Just make sure to return a new reference (replace). 
// Don't send back the same object reference 
// One example, could be:
return({
...prevState,
[prop]: updateSomething
});
});

不要这样做：

setPrice(
price.forEach(obj => {
if (checker && element.id === e.target.id) {
obj.price = element.price;
}
})
);