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

Question

这可能会令人困惑，但我感谢您的帮助。我基本上有一个数据列表，每个数据旁边都有一个“复制”按钮。单击时，我希望它更改为“已复制！” 500 毫秒，然后返回“复制”。

我的设置如下：我有一个数组，其中包含我作为道具传递给组件的数据列表（比如说数组 x）。

使用这个数组，我创建了一个 useEffect 钩子（当数据数组 x 更新时更新）。这个钩子使用原始数组长度的新数组（比如说数组 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() {&nbsp; const [todos, setTodos] = React.useState([]);&nbsp;&nbsp;&nbsp; React.useEffect(() => {&nbsp; &nbsp; fetch(url)&nbsp; &nbsp; &nbsp; .then(res => res.json())&nbsp; &nbsp; &nbsp; .then(todos => setTodos(todos))&nbsp; &nbsp; &nbsp; .catch(err => console.log(err.message));&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <TodoList todos={todos}/>&nbsp; &nbsp; </div>&nbsp; );}function TodoList(props) {&nbsp; function changeBtnText(event) {&nbsp; &nbsp; const target = event.target;&nbsp; &nbsp; if (target.matches("button")) {&nbsp; &nbsp; &nbsp; target.textContent = "Copied";&nbsp; &nbsp; &nbsp; setTimeout(() => (target.textContent = "Copy"), 1000);&nbsp; &nbsp; }&nbsp; }&nbsp; return (&nbsp; &nbsp; <div className="todoList" onClick={changeBtnText}>&nbsp; &nbsp; &nbsp; {props.todos.map(t => (&nbsp; &nbsp; &nbsp; &nbsp; <Todo key={t.id} {...t} />&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );}function Todo({ title, completed }) {&nbsp; return (&nbsp; &nbsp; <div className="todo">&nbsp; &nbsp; &nbsp; <span>TItle: {title}</span>&nbsp; &nbsp; &nbsp; <button>Copy</button>&nbsp; &nbsp; </div>&nbsp; );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);.App {&nbsp; font-family: sans-serif;&nbsp; text-align: center;}.todo {&nbsp; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);&nbsp; margin: 10px;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; padding: 10px;}.todo button {&nbsp; padding: 5px 10px;&nbsp; margin: 10px 0 0 0;&nbsp; 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 上查看此演示

Answer 2

import React, { useEffect, useState, useCallback, useRef } from 'react'import { range } from 'lodash-es'const App = () => {&nbsp; const [items, setItems] = useState(&nbsp; &nbsp; range(100).map((val) => ({ id: val, val, text: 'Copy' })),&nbsp; )&nbsp; const [copiedItem, setCopiedItem] = useState<number | undefined>(undefined)&nbsp; const timeout = useRef<number | undefined>(undefined)&nbsp; useEffect(() => {&nbsp; &nbsp; if (copiedItem) {&nbsp; &nbsp; &nbsp; setItems((itemsState) =>&nbsp; &nbsp; &nbsp; &nbsp; itemsState.map((item) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.id === copiedItem&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? { ...item, text: 'Copied' }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : { ...item, text: 'Copy' },&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; setItems((itemsState) =>&nbsp; &nbsp; &nbsp; &nbsp; itemsState.map((item) => ({ ...item, text: 'Copy' })),&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }&nbsp; }, [copiedItem])&nbsp; const handleClick = useCallback(&nbsp; &nbsp; (itemId) => () => {&nbsp; &nbsp; &nbsp; if (timeout.current) {&nbsp; &nbsp; &nbsp; &nbsp; window.clearTimeout(timeout.current)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; setCopiedItem(itemId)&nbsp; &nbsp; &nbsp; timeout.current = window.setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; setCopiedItem(undefined)&nbsp; &nbsp; &nbsp; }, 1000)&nbsp; &nbsp; },&nbsp; &nbsp; [],&nbsp; )&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {items.map((item) => (&nbsp; &nbsp; &nbsp; &nbsp; <div key={item.id} className="mb-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className="mr-2">{item.val}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button className="p-2 bg-gray-100" onClick={handleClick(item.id)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.text}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; )}export default App您可以使用另一种状态copiedItem来存储要复制的项目的 id 或索引。在 中useEffect我们可以寻找更改copiedItem以设置要复制的文本。除此之外，我们还需要对上一个超时的引用，以便我们可以在触发下一个项目超时之前清除它。

Answer 3

所以我尝试使用@Agney 建议在 setState 中使用回调。这是codesanbox链接https://codesandbox.io/s/quirky-dubinsky-lm03x?file=/src/App.js所以基本上我们在 setstate 回调中检查索引以最初将其设置为复制，在超时回调中我们再次检查相同的索引以设置回复制。

Answer 4

这是直接使用状态对其进行操作的问题，相反，ReactJS 提供了一个回调版本setState，允许您currentState在执行时作为参数访问 。您可以将其用作：setCpyBtn((currentState) => {&nbsp; return currentState.map((item, i) => {&nbsp; &nbsp; if (i === index) {&nbsp; &nbsp; &nbsp; return 'Copy';&nbsp; &nbsp; }&nbsp; &nbsp; return 'Copied';&nbsp; });})当然反之亦然。文档