时间戳

首页 > 解决方案 > 如何返回元素 React

javascript - 如何返回元素 React

问题描述

我请求你的帮助。我有一个工作代码和两个按钮。一个删除数组的第一个元素，第二个 - 最后一个元素。如何使用“恢复”按钮恢复（恢复）所有项目。

import logo from './logo.svg';
import React, {useState} from 'react';
import './App.css';

function App() {
    let [array, changedArray] = useState([
{
id: 1,
title:'title 1',
price:1
},
{
id: 2,
title: 'title 2',
price: 2
},
{
id:3,
title: 'title 3',
price: 3
}
)]

 function removeFirstElement () {
 let newArray = [...array];
 newArray.shift();
 changedArray(newArray);
}

function removeLastElement() {
let newArray = [...array];
newArray.pop();
changedArray(newArray)
}

return(
<div>
<ul>{array.map(el =><li>{el.title} {el.price}</li>)}</ul>
<button onClick={removeFirstElement}>Delete first element</button>
<button onClick={removeLastElement}>Delete last element</button>
<button>Restore</button>
</div>
);
}

export default App;

标签： javascriptreactjs

解决方案

您可以做的是将初始数组存储在 ref. 当您单击恢复按钮时，您可以使用该参考设置您的状态。

let [array, changedArray] = useState([...])
let initialValue = useRef(array);

const onRestore = () => {
    changedArray(initialValue.current);
};

<button onClick={onRestore}>Restore</button>

推荐阅读