关于react中hooks使用useState的更新不触发dom更新问题

问题：

  const [tableData, setTableData] = useState([{ key: '1' }])

  const newAddField = () => {
    tableData.push({
      key: `${fieldNum + 1}`
    })
    setFieldNum(fieldNum + 1)
    // 这种方法并不会更新dom节点
    setTableData(tableData)

  }

这种方法，虽然更新的useState，但是dom节点并不会更新
**原因：**在 Hook 中直接修改 state 的一个对象（或数组）属性的某个子属性或值，然后直接进行 set，不会触发重新渲染。对 Class Component来说，state 是 Immutable 的，setState 后一定会生成一个全新的 state 引用。它是通过 this.state 方式读取 state，所以每次代码执行都会拿到最新的 state 引用。
对 Hook Function Component 而言，useState 产生的数据也是 Immutable 的，通过数组第二个参数 Set 一个新值后，原来的值会形成一个新的引用在下次渲染时。

解决方法

通过扩展运算符改变引用地址

  const [tableData, setTableData] = useState([{ key: '1' }])

  const newAddField = () => {
    tableData.push({
      key: `${fieldNum + 1}`
    })
    setFieldNum(fieldNum + 1)
    // 这种方法并不会更新dom节点
    // setTableData(tableData)
    // 通过扩展运算符实现深拷贝
    setTableData([...tableData])

  }

参考链接