React中如何让JSON对象属性响应式更新并刷新页面？

你遇到的问题核心是React的state更新依赖不可变操作，和Vue的响应式机制存在差异：

• Vue通过代理追踪对象属性变化，直接修改属性会自动触发视图更新；
• 但React的useState需要传递新的state引用才会触发组件重渲染，直接修改原state内的对象属于可变操作，React无法感知到变化。

你的代码里直接修改了animal.name，虽然内存中的对象属性确实改变了，但animals数组的引用没有变化，所以React不会重新渲染页面。

正确的修改方式 #

要实现响应式更新，你需要创建原对象和数组的副本，修改副本后再通过setAnimals更新state：

async function changeAnimalName(animal) {
  // 1. 创建原动物对象的副本，修改name属性
  const updatedAnimal = { ...animal, name: "Better Name" };
  // 2. 创建新的数组，替换对应位置的元素
  const updatedAnimals = animals.map(ani => ani === animal ? updatedAnimal : ani);
  // 3. 更新state，传递新数组的引用
  setAnimals(updatedAnimals);
}

完整修改后的代码 #

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [animals, setAnimals] = useState([]);

  useEffect(() => {
    setAnimals([{ name: "A", kind: "dog" }]);
  }, []);

  async function changeAnimalName(animal) {
    const updatedAnimal = { ...animal, name: "Better Name" };
    const updatedAnimals = animals.map(ani => ani === animal ? updatedAnimal : ani);
    setAnimals(updatedAnimals);
  }

  return (
    <div className="App">
      {animals.map((animal) => (
        <div key={animal.name}> {/* 添加key属性，符合React列表渲染最佳实践 */}
          <b>{animal.name}</b> is a <b>{animal.kind}</b>
          <div
            style={{
              marginTop: "1em",
              backgroundColor: "green",
              padding: "1em",
              borderRadius: "2em",
              cursor: "pointer"
            }}
            onClick={() => changeAnimalName(animal)}
          >
            Change Name
          </div>
        </div>
      ))}
    </div>
  );
}

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