时间戳

首页 > 解决方案 > 如何在handleChange函数中更改数组中键/值对的值

javascript - 如何在handleChange函数中更改数组中键/值对的值

问题描述

我有一个行数可变的网格（取决于记录数），每个网格行有 3-5 张卡片。我们使用 useSelector 和 .map 来为每张卡片填写数据；数据的初始状态有很多键/值对，其中一些对记录是唯一的。在 console.log 中，它看起来像这样：

[ 0: {Key: 1, PerformanceYR: "2019", SubRegionKey: 24, showDetail: false},
  1: {Key: 2, PerformanceYR: "2019", SubRegionKey: 24, showDetail: false},
  2: {Key: 3, PerformanceYR: "2019", SubRegionKey: 24, showDetail: false} ]

我给每个按钮一个 id，它与写成 id={data.Key} 的键相匹配。我想要对句柄更改功能做的是编写它，以便如果我单击的按钮的键与数据集中的键匹配，它将仅将该记录中的“showDetail”从 false 更改为 true（反过来会呈现一个带有一些额外细节的新 div）。我一直在寻找几个小时，但我似乎无法弄清楚。我当前的 handleChange 函数正在将所有 showDetails 的值从 false 更改为 true。相关的代码如下所示：

const ServiceAreaTile = () => {
  const psOverviewSA = useSelector((state) => state.psOverviewSA);
  const classes = useStyles();
  const [detail, setDetail] = useState(false);

  const handleChange = (event, data) => {
  let index = psOverviewSA.findIndex(item=> item.Key === 
  event.currentTarget.id)
  let newArray = [...psOverviewSA]
  setDetail(!newArray[index].showDetail)
  }

  return psOverviewSA.map((data) => {
  data.showDetail = detail;
  return (
  //a bunch of code for the grid, cards, etc.

再往下，有一个如下所示的按钮：

 <Button id={data.Key} 
 onClick={(event, data) => handleChange(event, data)} >
  <ExpandMoreIcon />
 </Button>

最后，如果 showDetail 的状态为真，那么 div 应该出现在哪里：

{data.showDetail && <div><Typography>{data.SubRegionKey}</Typography></div>}

我对无法找到解决方案感到非常沮丧，因为它看起来应该很简单。任何帮助是极大的赞赏！

编辑：我发现如果我在主组件上方的文件中定义数据集并在 ServiceAreaTile 中使用 useState 而不是 useSelector，则上面的代码可以工作，但我确实需要使用 useSelector 来引入数据。有人可以解释为什么上面描述的 handleChange 函数可以与 useState 而不是 useSelector 一起使用吗？

标签： javascriptreact-hooksonchange

解决方案

事实证明，我需要将 showDetail: false 添加到我通过 useSelector 导入的操作中，而不是尝试将其添加到我的组件文件中；因此，我的动作编码需要看起来像这样（参见倒数第二行“showDetail”添加）：

import axiosconfig from "../../axiosconfig";
export const getpsOverviewSA = (performanceYR, subRegionKey) => async (
  dispatch
) => {
  const response = await axiosconfig.get("/api/psOverviewSA", {
    params: { performanceYR, subRegionKey },
  });
  dispatch({ type: "GET_PS_OVERVIEW_SA", payload: response.data, showDetail: false });
};

现在它完美地工作了。

推荐阅读