Javascript 数组更改后动态按钮类不更新

发布于05月18日

所以我有一个对象array.我遍历这个数组，并 for each 对象创建一个按钮.

看起来像这样

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

我所期望的行为是，当按下一个按钮时，它将变为动作，其余所有按钮保持不活动状态；当按下一个新按钮时，新按钮现在处于活动状态，其余所有按钮都处于禁用状态.一次只能激活一个按钮.

然而，我遇到的问题是，当按下一个新按钮时，它会变为活动按钮，但旧按钮不会更改类，并且即使其"活动"属性设置为false，也会保持活动状态.

你知道我该如何纠正这种行为吗？

推荐答案

如果不全面了解您如何使用state，下面是一个工作示例.我看到的另一个问题是，在映射的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