React函数组件State变更后页面未渲染问题求助

你在使用函数组件时遇到的核心问题是直接修改了state的引用类型数据，导致React无法检测到state变化，因此没有触发页面重渲染。

错误原因分析 #

在addProject函数中，你做了这样的操作：

let oldProjects = projects;
projects[id] = newProject;
setProjects(oldProjects);

这里的oldProjects只是原projects对象的引用，你直接修改了原state对象的内容，然后把同一个引用传给setProjects。React判断state是否变化是基于引用比对的，同一个引用会被认为state没有更新，所以不会触发重渲染。

修正后的代码 #

要解决这个问题，必须遵循React的不可变更新原则，每次更新state时创建一个新的对象：

import React, { useState } from "react";

function Projects() {
  const [projects, setProjects] = useState({});

  function addProject() {
    console.log("addProject()");
    // 创建项目
    let id = Date.now().toString().substr(8);
    let newProject = {
      name: `Upload-${id}`,
      files: {}
    };
    // 不可变更新state：创建新对象，合并原数据和新项目
    setProjects(prevProjects => ({
      ...prevProjects,
      [id]: newProject
    }));
    console.log("projects = ", projects);
  }
  return (
    <div>
      <h1>Projects.js (Functional Component)</h1>

      <button onClick={addProject}>Add Project</button>

      <div>{Object.keys(projects).length} projs</div>
    </div>
  );
}

export default Projects;

关键修正点 #

1. 使用函数式更新setProjects(prevProjects => {...})：这种方式能确保你获取到的是最新的state值，避免因闭包导致的旧state问题。
2. 用展开运算符...prevProjects创建新对象：把原state的所有属性复制到新对象中，再添加新的项目，保证原state对象不被修改，同时生成新的引用让React检测到变化。

另外关于函数组件和类组件的选择：现在React官方更推荐使用函数组件+Hook的写法，它比类组件更简洁，逻辑复用更灵活，适合大部分场景。

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