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

Question

我在这里举了一个问题的例子： 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>
  );
}

我知道我应该使用展开运算符，但我无法像预期的那样工作。

请帮忙！

Answer 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，则表示按钮已切换。您还可以在对象中保留 id 个切换按钮以加快查找速度。

Answer 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

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

React: how to use spread operator in a function that toggles states?

conditional-operator

togglebutton

spread

reactjs

use-state