React：如何在切换状态的函数中使用扩展运算符？答案

【问题标题】：React: how to use spread operator in a function that toggles states?React：如何在切换状态的函数中使用扩展运算符？
【发布时间】：2021-12-01 08:05:58
【问题描述】：

我在这里举了一个我的问题的例子： EXAMPLE

我正在映射一个对象数组，这些对象有一个在单击时切换的按钮，但是当单击该按钮时，每个对象都会更改。

这是代码

export default function App() {
  const [toggleButton, setToggleButton] = useState(true);

  // SHOW AND HIDE FUNCTION
  const handleClick = () => {
    setToggleButton(!toggleButton);
  };

  return (
    <div className="App">
      <h1>SONGS</h1>
      <div className="container">
        {/* MAPPING THE ARRAY */}
        {songs.map((song) => {
          return (
            <div className="song-container" key={song.id}>
              <h4>{song.name}</h4>
              {/* ON CLICK EVENT: SHOW AND HIDE BUTTONS */}
              {toggleButton ? (
                <button onClick={handleClick}>PLAY</button>
              ) : (
                <button onClick={handleClick}>STOP</button>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

我知道我应该使用扩展运算符，但我无法按预期工作。

请帮忙！

【问题讨论】：

你的所有按钮都附加到同一个状态

标签： reactjs use-state conditional-operator togglebutton spread

【解决方案1】：

当然，每个对象都会改变，因为您需要跟踪每个按钮的切换状态。这是一种方法：

import { useState } from "react";
import "./styles.css";

const songs = [
  {
    name: "Song A",
    id: "s1"
  },
  {
    name: "Song B",
    id: "s2"
  },
  {
    name: "Song C",
    id: "s3"
  }
];

export default function App() {
  const [toggled, setToggled] = useState([]);

  const handleClick = (id) => {
    setToggled(
      toggled.indexOf(id) === -1
        ? [...toggled, id]
        : toggled.filter((x) => x !== id)
    );
  };
  return (
    <div className="App">
      <h1>SONGS</h1>
      <div className="container">
        {songs.map((song) => {
          return (
            <div className="song-container" key={song.id}>
              <h4>{song.name}</h4>
              {toggled.indexOf(song.id) === -1 ? (
                <button onClick={() => handleClick(song.id)}>PLAY</button>
              ) : (
                <button onClick={() => handleClick(song.id)}>STOP</button>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

有很多方法可以做到这一点。在这里，如果 id 在数组中，则表示该按钮已切换。您还可以在对象中保留ids 的切换按钮以便更快地查找。

【讨论】：

谢谢！顺便说一句，如何防止同时切换多个按钮？...我的意思是：当一个按钮处于活动状态时，当单击另一个按钮时切换以停止它。
@AfxCrush 不确定我是否得到了你，但你似乎想一次只在数组中保留一个 一个 id 对吗？相应地更改handleClick。如果不存在，则直接存储单击按钮的 id 而不是附加；而不是[...toggled, id] 做[id]

【解决方案2】：

处理此要求的一种方法是将本地数据保存到组件本身的状态中。

我创建了一个新的Button 组件并仅在那里管理切换效果。我已将 state 和 handleClick 方法提升到 Button 组件，这样更有意义。

const Button = () => {
  const [toggleButton, setToggleButton] = useState(true);
  const click = () => {
    setToggleButton((prevValue) => !prevValue);
  };

  return <button onClick={click}>{toggleButton ? "Play" : "Stop"}</button>;
};

工作示例 - Codesandbox Link

【讨论】：