React使用数组自带的方法后，重新赋值后页面没刷新

问题

在 react 中使用数组自带的 pop 方法，重新 setState 后页面并没有更新，代码如下

Live Editor

function Navigation() { const [navItems, setNavItems] = useState([ { id: 0, link: "HOME" }, { id: 1, link: "ABOUT" }, { id: 2, link: "PORTFOLIO" }, { id: 3, link: "MUSIC" }, { id: 4, link: "CONTACT" }, ]); const nextHandler = () => { let a = navItems; a.reverse(); return setNavItems(a); }; return ( <div> <button onClick={nextHandler}>删除</button> <div> <div> <ul> {navItems.map((item) => { return <li key={item.id}>{item.link}</li>; })} </ul> </div> </div> </div> ); }

function Navigation() {
  const [navItems, setNavItems] = useState([
    { id: 0, link: "HOME" },
    { id: 1, link: "ABOUT" },
    { id: 2, link: "PORTFOLIO" },
    { id: 3, link: "MUSIC" },
    { id: 4, link: "CONTACT" },
  ]);

  const nextHandler = () => {
    let a = navItems;
    a.reverse();
    return setNavItems(a);
  };

  return (
    <div>
      <button onClick={nextHandler}>删除</button>
      <div>
        <div>
          <ul>
            {navItems.map((item) => {
              return <li key={item.id}>{item.link}</li>;
            })}
          </ul>
        </div>
      </div>
    </div>
  );
}

Result

Loading...

仔细查看代码，调用 a.pop() 方法，a 数组已经移除了，但是没什么效果，可以点击删除按钮查看效果。

原因

虽然调用了 pop() 方法，也重新 setNavItems 了，但是 a 变量还是引用同一个地址，所以页面没有更新。不同于 vue 会自动刷新页面，类似的方法还有 splice()，push()，unshift()，shift()，reverse()，sort() 等。

解决

创建一个新的引用，这样就可以解决问题了。

Live Editor

function Navigation2() { const [navItems, setNavItems] = useState([ { id: 0, link: "HOME" }, { id: 1, link: "ABOUT" }, { id: 2, link: "PORTFOLIO" }, { id: 3, link: "MUSIC" }, { id: 4, link: "CONTACT" }, ]); const nextHandler = () => { let a = navItems.slice(); // 创建新的引用 a.pop(); return setNavItems(a); }; return ( <div> <button onClick={nextHandler}>删除</button> <div> <div> <ul> {navItems.map((item) => { return <li key={item.id}>{item.link}</li>; })} </ul> </div> </div> </div> ); }

function Navigation2() {
  const [navItems, setNavItems] = useState([
    { id: 0, link: "HOME" },
    { id: 1, link: "ABOUT" },
    { id: 2, link: "PORTFOLIO" },
    { id: 3, link: "MUSIC" },
    { id: 4, link: "CONTACT" },
  ]);

  const nextHandler = () => {
    let a = navItems.slice(); // 创建新的引用
    a.pop();
    return setNavItems(a);
  };

  return (
    <div>
      <button onClick={nextHandler}>删除</button>
      <div>
        <div>
          <ul>
            {navItems.map((item) => {
              return <li key={item.id}>{item.link}</li>;
            })}
          </ul>
        </div>
      </div>
    </div>
  );
}

Result

Loading...

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈

本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载

商业侵权必究，如需授权请联系340443366@qq.com

原文链接：https://www.1024nav.com/faq/react-hook-setstate-no-use

---