Как изменить значение для пары ключ / значение в массиве в функции handleChange - PullRequest
Новая
       38

Как изменить значение для пары ключ / значение в массиве в функции handleChange

0 голосов
/ 20 апреля 2020

У меня есть сетка с переменным количеством строк (в зависимости от количества записей) и 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 = {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>

И, наконец, где должен появиться div если состояние showDetail истинно: 

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

Я очень расстроен из-за своей неспособности найти решение для этого, так как кажется, что оно должно быть простым. Любая помощь приветствуется!

РЕДАКТИРОВАТЬ: я обнаружил, что приведенный выше код работает, если я определяю набор данных в файле над основным компонентом и использую useState в ServiceAreaTile вместо useSelector, но мне действительно нужно использовать используйте Выбор, чтобы ввести данные. Может кто-нибудь объяснить, почему функция handleChange, как описано выше, будет работать с useState, а не с useSelector?

1 Ответ

0 голосов
/ 27 апреля 2020

Оказывается, мне нужно было добавить 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 });
};

Теперь все работает отлично.

...