数组更改后动态按钮 class 不更新

Question

所以我有一组对象。我遍历这个数组并为每个对象创建一个按钮。当一个按钮被按下时，被按下按钮的那个对象有一个值“active”，它将被设置为 true。当按下另一个按钮时，它的“活动”值现在为真，所有其他按钮都变为假。

看起来像这样

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

我期望的行为是当一个按钮被按下时它变成动作，其余的都保持不活动状态，当一个新按钮被按下时新按钮现在是活动的并且所有其他按钮都被禁用。一次只有一个活动按钮。

但是，我遇到的问题是按下新按钮时它会变为活动状态，但旧按钮不会改变 class 并且即使它处于“活动状态”也会保持活动状态属性设置为 false。

知道如何解决此问题吗？

Answer 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

数组更改后动态按钮 class 不更新

dynamic Button class does not update after the array change

javascript

css

jsx

reactjs