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

最新推荐文章于 2024-12-23 22:54:31 发布

夹心776655

最新推荐文章于 2024-12-23 22:54:31 发布

阅读量9.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：研发笔记 React 文章标签： reactjs

本文链接：https://blog.csdn.net/qq_37086980/article/details/118052714

React 同时被 2 个专栏收录

31 篇文章

订阅专栏

研发笔记

27 篇文章

订阅专栏

这篇博客讨论了在React应用中遇到的问题：通过useState更新对象数组时，由于对象引用不变导致视图未更新。作者提供了一个例子，展示了在点击事件中尝试改变数组内对象的状态，但由于JavaScript的引用特性，React并未检测到变化。解决方法是使用浅拷贝（如使用扩展运算符）创建新的数组实例，然后修改并赋值，以触发React组件的重新渲染。博客强调了React中状态更新需要注意的对象引用问题以及如何正确地更新复杂数据类型的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面通过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)，则不更新视图。