所以我有一個item在我的陣列狀態中的物件items。我還將專案內容（及其 ID）和當前專案的索引放入函式indexMove中。
indexMove當我按下特定item的 from時觸發的函式也是如此items。
我的目標是，當indexMove被按下時，專案的索引號減少 1，因此它在串列中向上移動。但是，索引 0 處的專案應該只是停止并且不能進一步向上移動。
我真的希望我很清楚，因為這有點難以解釋，但是我將如何撰寫它來按索引更改專案？謝謝
const [items, setItems] = useState([])
const indexMove = (item, index) =>{
console.log(item)
console.log(index)
}
uj5u.com熱心網友回復：
FlatList這是一個使用虛擬狀態陣列的快速而骯臟的解決方案。
// just for test
React.useEffect(() => {
// dummy data, some object with an id
setItems([{ id: "1" }, { id: "2" }, { id: "3" }, { id: "4" }, { id: "5" }, { id: "6" }])
}, [setItems])
const onItemClick = React.useCallback(
(index) => {
// do nothing on top element
if (index !== 0) {
let previousItems = [...items]
let temp = previousItems[index - 1]
previousItems[index - 1] = previousItems[index]
previousItems[index] = temp
setItems(previousItems)
}
},
[setItems, items]
)
return (
<View>
<FlatList
data={items}
renderItem={({ item, index }) => (
<TouchableOpacity style={{ margin: 20 }} onPress={() => onItemClick(index)}>
<Text>{item.id}</Text>
</TouchableOpacity>
)}
keyExtractor={(item) => item.id}
/>
</View>
)
這產生以下
按下專案3將其向上移動。
它停止向上移動，直到到達最頂部，因此按下頂部元素無效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/428803.html
標籤：反应式
上一篇：更新陣列而不更改其順序