React中onClick更新useState变量listData并触发重渲染的实现问题

问题核心原因 #

React的useState状态更新采用浅比较逻辑判断是否需要触发重渲染：你当前代码中直接调用listData.push(newrow)是在原有数组的内存地址上修改内容，数组的引用本身没有发生变化，React会认为状态没有更新，因此跳过重渲染流程。

正确修改方案 #

不要直接修改原状态数组，每次更新时传入新的数组引用即可触发重渲染，推荐使用函数式更新写法避免闭包导致的旧状态问题，修改后的add函数如下：

function add(){
  let newrow = {};
  // 基于旧状态生成新数组，传入更新函数
  setlistData(prevList => [...prevList, newrow])
}

完整可运行代码 #

import React, { useState } from "react";

const PageName = () => {
  const [listData, setlistData] = useState([]);

  function add(){
    let newrow = {};
    setlistData(prevList => [...prevList, newrow])
  }

  return (
    <div>
      {listData.length}
      <button onClick={() => add()}>Add</button>
      {
        listData.map(function (row, i) {
          return (
            <p key={i}>row</p>
          );
        })
      }
    </div>
  );
};

export default PageName;

其他可选写法 #

• 直接基于现有状态生成新数组：setlistData([...listData, newrow])
• 使用concat方法生成新数组：setlistData(listData.concat(newrow))

内容的提问来源于stack exchange，提问作者Jingles