反应：为什么我的组件在由数组 state 控制时不重新渲染？

Question

我的应用程序中有一堆按钮，单击它们时我会更改它们的类名（“myButton”或“activeMyButton”）。 每当我单击非活动按钮时，它都不会重新渲染。 但是当我点击一个活动按钮时，它会重新渲染（如果我之前点击了非活动按钮，它们会用这个重新渲染）。 这对我来说没有任何意义。 这是我的代码：按钮组件

export default function MyButton({
  buttonFunction,
  buttonParameter,
  activeButton,
}) {
  return (
    <button
      className={activeButton ? "myButton activeMyButton" : "myButton"}
      onClick={() => {
        buttonFunction(buttonParameter);
      }}
    >
      {buttonParameter}
    </button>
  );
}

这是父组件：

export default function Mathoperators() {
  const [activeOperators, setActiveOperators] = useState(["+"]);

  const handlingOperators = (operatorInput) => {
    let stockOperators = activeOperators;
    if (
      stockOperators.length > 0 &&
      stockOperators.some((operator) => {
        return operator === operatorInput;
      })
    ) {
      stockOperators = stockOperators.filter((operator) => {
        return operator !== operatorInput;
      });
      setActiveOperators(stockOperators);
    } else {
      stockOperators.push(operatorInput);
      setActiveOperators(stockOperators);
    }
  };

  const handlingOperatorButtonClass = (operatorInput) => {
    return activeOperators.some((operator) => {
      return operator === operatorInput;
    });
  };

  return (
    <section className="optionsContainer">
      <MyButton
        buttonParameter={!mathPlus}
        buttonFunction={setMathPlus}
        activeButton={mathPlus}
      />
      <MyButton
        buttonParameter="−"
        buttonFunction={handlingOperators}
        activeButton={handlingOperatorButtonClass("−")}
      />
      <MyButton
        buttonParameter="×"
        buttonFunction={handlingOperators}
        activeButton={handlingOperatorButtonClass("×")}
      />
      <MyButton
        buttonParameter="÷"
        buttonFunction={handlingOperators}
        activeButton={handlingOperatorButtonClass("÷")}
      />
    </section>
  );
}

如果我从这个数组 state 切换到四个 boolean 状态，一切正常。 但我想知道我是否对这个版本做错了什么。 谢谢 ！

Answer 1

当您编写let stockOperators = activeOperators时，您并没有创建一个新数组，您只是创建了一个指向activeOperators state 的变量。 因此stockOperators.push(operatorInput)实际上直接改变了你的 state ，这会产生你所看到的这种奇怪的行为。

let stockOperators = [...activeOperators]应该修复它！

Answer 2

将其更改为let stockOperators = [...activeOperators];

发生这种情况是因为当您这样做时let stockOperators = activeOperators;

它将复制对值的引用并更改它意味着您更改 start 本身，因此当您将其放入 setState 时，它看起来就像从未更改过