Класс динамической кнопки не обновляется после изменения массива

Итак, у меня есть массив объектов. Я перебираю этот массив и создаю кнопку для каждого объекта. Когда кнопка нажата, этот объект нажатой кнопки имеет значение «активный», которое будет установлено в true. когда нажата другая кнопка, ее «активное» значение теперь равно true, все остальные переключаются на false.

это выглядит так

myarray.map(item =>
        <Button
          className={item.active? "btn-active" : "btn-disabled"}
          onClick={() => setActive(item);
          }}
        >
          {item.active? "Checking..." : "Start"}
        </Button>
)

Я ожидаю, что когда кнопка нажата, она переходит в действие, а все остальные остаются неактивными, когда нажимается новая кнопка, новая кнопка теперь активна, а все остальные отключены. активна только одна кнопка.

Однако проблема, с которой я сталкиваюсь, заключается в том, что когда нажимается новая кнопка, она становится активной, но старая не меняет класс и остается активной, даже если для ее свойства «active» установлено значение false.

Любая идея, как я могу исправить это поведение?

setActive{item} не является правильным способом вызова функции, это должно быть setActive(item).
SSM 17.05.2022 21:47

Где вы сбрасываете состояние active для других кнопок? Похоже, вы напрямую вызываете средство обновления состояния по клику,

SSM 17.05.2022 21:49

Я думаю, вы можете сохранить индекс активного элемента как переменную состояния, а затем сравнить с текущим итератором.

Julius0505 17.05.2022 21:58

извините, я сделал опечатку, когда писал здесь код. Я скопировал прошлое. в фактическом коде это правильно.

Yujin Dong 17.05.2022 22:00

что делает setActive и как хранится состояние для myarray ? Я предлагаю добавить их в ваш фрагмент кода. Возможно, поможет урезанный, но работающий пример вашей проблемы.

David Kerr 17.05.2022 22:04

массив хранится в состоянии и меняет значение объекта на активное: true все остальные меняют его на false

Yujin Dong 17.05.2022 22:06

проблема, кажется, в том, что он не перерисовывает эти кнопки снова

Yujin Dong 17.05.2022 22:06

есть ли шанс, что мы сможем увидеть setActive?

Ionut Achim 17.05.2022 22:08
myarray.map((item, index) => <Button className={active === index? "btn-active" : "btn-disabled"} onClick={() => setActive(index); }} > {index === active? "Checking..." : "Start"} </Button> )
Julius0505 18.05.2022 01:13
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
2
9
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Без полной картины того, как вы используете состояние, вот рабочий пример. Еще одна проблема, которую я заметил, заключается в том, что вам не хватает ключа в сопоставленном элементе jsx.

Возможно, вы не изменяете состояние myarray.

import "./styles.css";
import React from "react";

export default function App() {
  const [myarray, setMyarray] = React.useState([
    { id: 1, active: false },
    { id: 2, active: false }
  ]);

  const setActive = (id) => {
    setMyarray((prev) =>
      prev.map((item) => {
        if (item.id === id) {
          return { ...item, active: true };
        }
        return { ...item, active: false };
      })
    );
  };

  return (
    <div className="App">
      {myarray.map((item) => (
        <button
          key={`button-${item.id}`}
          className={item.active ? "btn-active" : "btn-disabled"}
          onClick={() => setActive(item.id)}
        >
          {item.active ? "Checking..." : "Start"}
        </button>
      ))}
    </div>
  );
}

https://codesandbox.io/s/flamboyant-shirley-i24v0z

Вы забыли обновить другие кнопки с помощью active: false

Ionut Achim 17.05.2022 22:24

Попробуй это сейчас. Это код, которым вам лучше поделиться, если он является источником вашей ошибки. Я только добавляю заполнители.

David Kerr 17.05.2022 22:27

Другие вопросы по теме