React 数据改变后页面没有重新渲染

页面通过render渲染，通过setState改变数据但是页面并未改变

import React, { Fragment } from 'react';
import { useState } from 'react';
import './index.less';

export default function Guide() {

  const introArr = [
    {
      id: 0,
      className: 'stepA',
      show: true
    },
    {
      id: 1,
      className: 'stepB',
      show: false
    }
  ]
  const [list, setList] = useState(introArr);

  const nextStep = (index: number) => {
    console.log("INDEX", index)
    // 遍历 introArr, (index + 1)的设为true, 其他设为false
    list.map((item: any) => {
       return item.show = false;
    })
    list[index + 1].show = true
    // 更改 list 的值
    // 数组对象是引用方式，值都是地址，地址没有改变
    setList(list)
  }

  return (
    <Fragment>
      {/* 黑色遮罩层 */}
      <div className="mask"></div>
      {/* 引导区 */}
      <div className="searchTip">
        {
          list.map((item: any, index: number) => (
            item.show && 
              <div className = {list[index].className}>
                <a className = "nextStep" onClick = {() => nextStep(index)}>下一步</a>
                <span className = "close"></span>
              </div>
            )
          )
        }
          
      </div>
    </Fragment>
  );
}

解决方法：浅拷贝方式获取对象并修改再赋值。

const newList = [...list]

原因: 对象数组是引用方式 ,对于react来说它的值都是地址(涉及到tree diff)，因为没有被重新赋值(地址没有改变)，所以 react 会认为仍然是之前的元素(element)，则不更新视图。