javascript - ReactJS 如何使用状态钩子(Hook)获取超时的文本更改按钮列表？

Question

这可能会令人困惑，但我感谢您的帮助。我基本上有一个数据列表，每个数据旁边都有一个“复制”按钮。单击时，我希望它更改为“已复制!” 500 毫秒，然后返回“复制”。
我的设置如下:我有一个数组，其中包含我作为 Prop 传递给组件的数据列表(比如说数组 x)。
使用这个数组，我创建了一个 useEffect 钩子(Hook)(当数据数组 x 更新时更新)。这个钩子(Hook)用原始数组长度的新数组(比如说数组 y)和文本“复制”更新一个新状态。
据我所知，似乎工作得很好，现在这是我的问题所在:
然后，我为创建新数组的按钮创建一个处理程序，使用点符号展开并将按钮的索引从“复制”更新为“复制!”。然后超时将其恢复为“复制”(下面的代码)。
效果很好，但你怀疑我有一个错误。如果我过快地点击另一个按钮上的复制，我最终会将原来的“复制”按钮卡在那里。正如我猜测的那样，我更新状态的速度更快，然后另一个状态回落。

function copyButtonClipBrd(index) {
  console.log("Test Copy Button");
  console.log(cpyBTN);
  let newArr = [...cpyBTN];
  newArr[index] = "Copied!";
  setCpyBTN(newArr);
  
  setTimeout(function () {
    let newArr = [...cpyBTN];
    newArr[index] = "Copy";
    setCpyBTN(newArr);
  }, 600);
}

会喜欢任何建议，甚至更好的方法来做到这一点，因为我这样做主要是为了学习。谢谢大家!

Answer 1

您不需要更新状态，当单击任何按钮时，只需在按钮上显示不同的文本。
在包含所有数据的列表的父元素上添加点击事件监听器，并检查是否触发了 click 的元素事件是否是复制按钮。如果是，请更改其文本并设置一个计时器，将文本恢复为“复制”
演示:

const url = 'https://jsonplaceholder.typicode.com/todos';

function App() {
  const [todos, setTodos] = React.useState([]);
  
  React.useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(todos => setTodos(todos))
      .catch(err => console.log(err.message));
  }, []);

  return (
    <div className="App">
      <TodoList todos={todos}/>
    </div>
  );
}

function TodoList(props) {

  function changeBtnText(event) {
    const target = event.target;

    if (target.matches("button")) {
      target.textContent = "Copied";
      setTimeout(() => (target.textContent = "Copy"), 1000);
    }
  }

  return (
    <div className="todoList" onClick={changeBtnText}>
      {props.todos.map(t => (
        <Todo key={t.id} {...t} />
      ))}
    </div>
  );
}

function Todo({ title, completed }) {
  return (
    <div className="todo">
      <span>TItle: {title}</span>
      <button>Copy</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: sans-serif;
  text-align: center;
}

.todo {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.todo button {
  padding: 5px 10px;
  margin: 10px 0 0 0;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

您还可以在 Codesandbox 上查看此演示