I have a simple array in below and I just change index of elements in array by a handler:
const [items, setItems] = useState([
{ id: 5, val: "Iran" },
{ id: 2, val: "Germany" },
{ id: 3, val: "Brazil" },
{ id: 4, val: "Poland" }
]);
My Handler:
const handlePosition = (old_index, new_index) => {
if (new_index >= items.length) {
var k = new_index - items.length + 1;
while (k--) {
items.push(undefined);
}
}
items.splice(new_index, 0, items.splice(old_index, 1)[0]);
setItems(items);
console.log(items);
};
I try to render the items
array as follows:
<ul>
{items.map((item, index) => (
<li key={item.id}>
{item.val}
<button onClick={() => handlePosition(index, index + 1)}>🡇</button>
<button onClick={() => handlePosition(index, index - 1)}>🡅</button>
</li>
))}
</ul>
Now, My array changed properly and updates the state but not re-render.
Here is a demo of my project in CodeSandBox: Link
It's because the instance of the items
array is not changing.
Try this:
setItems([...items]);
That copies the array to a new identical array. React will see that it's different and will re-render.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.