本文介绍了Reaction不重新呈现更新的数组状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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]);
将数组复制到新的相同数组。Reaction将看到它不同,并将重新呈现。

这篇关于Reaction不重新呈现更新的数组状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 12:47