如何使用钩子从传递键的数组中删除元素？

Question

I have a simple array like this

let myArray = ['one', 'two', 'three'];

let's say I want to remove the second element, what I would do is

myArray.splice(1, 1);

but what if to set this array I am using a hook like this?

const [myArray, setMyArray] = useState([]);

what is the correct way to remove an element passing its index and possibly reorder all the indexes in order not to have gaps?

Answer 1

In React, you do not mutate existing state using methods like .splice . Instead you will create a new state and pass it to setMyArray . As an example use, this component will loop over myArray and create a clickable remove button for each element in the array -

 function immutableSplice(arr, index, count) { return [ // return *new* array...arr.slice(0, index), // does not mutate arr...arr.slice(index + count) // does not mutate arr ] } function MyComponent(props) { const [myArray, setMyArray] = React.useState(["", "", ""]); const removeElement = index => event => setMyArray(immutableSplice(myArray, index, 1)) return myArray.map((v, index) => <button key={index} onClick={removeElement(index)}>remove {v}</button> ) } ReactDOM.render(<MyComponent/>, document.body)

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

Immutable state is a principle discipline of the React pattern. Because of this, many libraries exist to help with immutable manipulation of objects and arrays. See Immutable.js and Immer, to name a few.