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

Question

我有一个像这样的简单数组

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

假设我想删除第二个元素，我会做的是

myArray.splice(1, 1);

但是如果我使用这样的钩子来设置这个数组呢？

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

删除传递其索引的元素并可能重新排序所有索引以免出现间隙的正确方法是什么？

Answer 1

在 React 中，您不会使用.splice等方法改变现有状态。 相反，您将创建一个新状态并将其传递给setMyArray 。 作为示例使用，该组件将遍历myArray并为数组中的每个元素创建一个可点击的删除按钮 -

 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>

不可变状态是 React 模式的原则原则。 因此，存在许多库来帮助对对象和数组进行不可变操作。 请参阅 Immutable.js 和 Immer，仅举几例。