javascript - 使用 React hooks 反转数组

标签 javascript reactjs ecmascript-6 react-hooks

使用 javascript 是否有快速交换数组中的 2 个项目的方法?

所以如果它是一个 bool 值你可以这样做

const [isTrue, setIsTrue] = useState(false);

setIsTrue(!isTrue);

但是说我有一个数组

// I want to swap the items in the array on a click 
const [trueOrFalse, setTrueOrFalse] = useState([true, false]);

我想切换这些,如果有两个项目,是否有快速交换数组中项目的方法

setTrueOrFalse(!trueOrFalse); // would equal [false, true]

<div onClick={() => setTrueOrFalse()} />Swap items in array</div>

我试图将索引 0 处的元素移动到索引 1,反之亦然。

最佳答案

你可以简单地使用解构与 useState setter 回调方法

// I want to swap the items in the array on a click 
const [trueOrFalse, setTrueOrFalse] = useState([true, false]);

const swapState = () => {
    setTrueOrFalse(prevState => {
        const [val1, val2] = prevState;
        return [val2, val1];
    })
}

<div onClick={() => swapState()} />Swap items in array</div>

Working demo

关于javascript - 使用 React hooks 反转数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54520392/

相关文章:

javascript - 如何通过KNOCKOUT中的数据绑定(bind)值更改css中规则的值?

javascript - 将 props、state 和 [this] 值传递给实用程序文件

javascript - ReactJS - 未定义的元素

javascript - 响应变量值更改不更新 React 组件

javascript - es6 super prop 方法调用 super other prop 方法

javascript - 在浏览器中加载和显示 DOM 之前修改正文 HTML 内容

javascript - 为什么我的 Jquery 元素大小调整不起作用?

javascript - RxJS5 - 虚拟可观察量

javascript - 从不同变量类型获取数组的有效方法

javascript - 对深层嵌套对象进行递归迭代以查找父对象