只有 1 个真实状态介绍数组 React js答案

【问题标题】：Only 1 true state intro array React js只有 1 个真实状态介绍数组 React js
【发布时间】：2020-10-28 07:41:44
【问题描述】：

怎么了？

我正在尝试使用 ReactJS (NextJS) 从前端主页重现滑动按钮效果。 Sliding buttons from Frontity

我设法创建了滑动按钮效果，但我在状态管理方面遇到了困难。我将所有对象都映射到“isActive：true/false”元素，我将创建一个函数，将“isActive：true”放在单击的按钮上，但将“isActive：false”放在所有其他按钮上。我不知道那种东西的语法/方法。

请看一下我的代码框以获得更清晰的信息（使用反应钩子）： https://codesandbox.io/s/busy-shirley-lgx96

非常感谢大家:)

【问题讨论】：

您正在按索引映射按钮，并且似乎正在使用索引作为更新按钮逻辑的一部分......为什么不只存储“活动索引”并检查渲染@987654323 @?

标签： reactjs boolean

【解决方案1】：

更新：正如上面 Drew Reese 所指出的，更简洁/更容易的是只有一个 activeIndex 状态：

const TabButtons = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleButtonClick = (index) => {
    setActiveIndex(index);
  };

  return (
    <>
      <ButtonsWrapper>
        {TabButtonsItems.map((item, index) => (
          <div key={item.id}>
            <TabButtonItem
              label={item.label}
              ItemOrderlist={item.id}
              isActive={index === activeIndex}
              onClick={() => handleButtonClick(index)}
            />
          </div>
        ))}
        <SlidingButton transformxbutton={activeIndex}></SlidingButton>
      </ButtonsWrapper>
    </>
  );
};

我对你的 TabButtons 做了一些修改：

const TabButtons = () => {
  const [buttonProps, setButtonProps] = useState(TabButtonsItems);

  // ////////////   STATE OF SLIDING BUTTON (TRANSLATE X )  ////////////

  const [slidingbtn, setSlidingButton] = useState(0);

  // //////////// HANDLE CLIK BUTTON  ////////////

  const HandleButtonState = (item, index) => {
    setButtonProps((current) =>
      current.map((i) => ({
        ...i,
        isActive: item.id === i.id
      }))
    );

    setSlidingButton(index);
  };

  return (
    <>
      <ButtonsWrapper>
        {buttonProps.map((item, index) => (
          <div key={item.id}>
            <TabButtonItem
              label={item.label}
              ItemOrderlist={item.id}
              isActive={item.isActive}
              onClick={() => HandleButtonState(item, index)}
            />
          </div>
        ))}
        <SlidingButton transformxbutton={slidingbtn}></SlidingButton>
      </ButtonsWrapper>
    </>
  );
};

当我们单击一个按钮时，我们将其 isActive 状态设置为 true，并将所有其余按钮设置为 isActive: false。我们也应该使用状态，因为我们也声明了它。改变状态会强制组件重新渲染，我们也不会改变任何东西，而是重新创建按钮的状态。

【讨论】：