gpt4 book ai didi

javascript - React 不会重新渲染更新的数组状态

转载 作者:行者123 更新时间:2023-12-05 00:25:59 26 4
gpt4 key购买 nike

我在下面有一个简单的数组,我只是通过处理程序更改数组中元素的索引:

const [items, setItems] = useState([
{ id: 5, val: "Iran" },
{ id: 2, val: "Germany" },
{ id: 3, val: "Brazil" },
{ id: 4, val: "Poland" }
]);

我的处理程序:
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);
};

我尝试渲染 items数组如下:
<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>

现在,我的数组 正确更改并更新状态但不会重新渲染。

这是我在 CodeSandBox 中的项目演示: Link

最佳答案

这是因为 实例 items数组没有改变。

尝试这个:

setItems([...items]);

这会将数组复制到一个新的相同数组。 React 会发现它不同并且会重新渲染。

关于javascript - React 不会重新渲染更新的数组状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61896668/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com