Reactjs 使用react钩子更新部分状态

我有一个事件处理程序，每次单击它，我的应用程序都会崩溃。该问题与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;
`

`import React，{useContext}来自“React”；
从“./model/PagesContext”导入{PagesContext}；
进口{
主包装器，
主文本，
纽扣包装，
偶像
选择容器，
纽扣标签
}来自“./StyledComponents”；
常量选项=（{pagename，values}）=>{
const[price，setPrice，history]=使用上下文（PagesContext）；
const checker=price.some（item=>item.url==history.location.pathname）；
const AddPrice=e=>{
values.forEach（元素=>{
if（element.id==e.target.id&&！检查器）{
设定价格([
价格
{price:element.price，url:history.location.pathname}
]);
history.push（element.next）；
}否则{
设定价格(
price.forEach（obj=>{
if（checker&&element.id==e.target.id）{
obj.price=element.price；
}
})
);
history.push（element.next）；
}
});
};
返回(
{pagename}
{values.map（按钮=>(
{button.name}
))}
);
};
导出默认选择；
`

您正在使用依赖于旧状态的新状态值更新状态，您应该熟练地使用以下方法：

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;
  }
  })
);

---

问题和描述不相关。请更好地描述问题和你想要实现的目标。这是否回答了你的问题@不幸的是，埃米利伯格伦不完全，我已经检查过了