React中遍历嵌套JSON对象替换值时遭遇“Objects are not valid as a React child”错误的解决方法

这个Error: Objects are not valid as a React child报错很常见，本质是你尝试让React直接渲染一个对象（而不是字符串、数字、React元素这类可渲染的内容）。结合你的代码来看，递归函数本身存在几个问题，不仅可能导致这个渲染错误，还可能违反React的状态更新规则，我来一步步帮你修正：

先分析原函数的问题 #

1. 直接修改原数据：你的函数直接修改了传入的data对象/数组，在React中状态必须是不可变的，直接修改原状态会导致React无法检测到变化，进而引发渲染异常。
2. 未区分数组和普通对象：typeof []也会返回object，用for...in遍历数组会遍历到原型链上的属性，容易出问题。
3. 宽松相等判断：用==会触发隐式类型转换，可能导致意料之外的替换。
4. 未处理null：typeof null也是object，递归处理null会报错。

正确的实现方式 #

我们需要写一个纯函数，不修改原数据，返回全新的对象/数组结构，同时精准区分数组、对象和基础类型：

const changeVal = (data, oldV, newV) => {
  // 处理数组：遍历每个元素递归替换
  if (Array.isArray(data)) {
    return data.map(item => changeVal(item, oldV, newV));
  }

  // 处理对象（排除null，因为typeof null === 'object'）
  if (typeof data === 'object' && data !== null) {
    return Object.fromEntries(
      Object.entries(data).map(([key, value]) => [key, changeVal(value, oldV, newV)])
    );
  }

  // 基础类型：严格匹配后替换
  return data === oldV ? newV : data;
};

在React中如何使用 #

因为这个函数返回新的对象/数组，你可以直接用它来更新状态：

import { useState } from 'react';

function YourComponent() {
  const [jsonData, setJsonData] = useState(yourInitialJsonArray);

  const handleReplace = () => {
    const updatedData = changeVal(jsonData, '旧值', '新值');
    setJsonData(updatedData);
  };

  return (
    <div>
      <button onClick={handleReplace}>替换值</button>
      {/* 注意：渲染时要确保你输出的是可渲染的内容，比如对象的属性，而不是整个对象 */}
      {jsonData.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

额外提醒 #

• 渲染时一定要避免直接输出对象，比如不要写{item}，而是写{item.someField}，这是导致那个报错的直接原因。
• 保持状态的不可变性是React的核心原则，这个纯函数的实现完全符合要求，不会触发意外的渲染问题。

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