React嵌套评论树添加评论时出现[object Object]错误求助

问题描述 #

开发React嵌套评论应用时，通过嵌套树结构新增评论，前几条评论可正常添加，但添加第5或第6条时会出现[object Object]错误。

相关代码 #

子评论组件代码 #

const [showInput, setShowInput] = useState(false);
const [showEdDelTab, setShowEdDelTab] = useState(false);
const [showText, setShowText] = useState("");

const { addComment } = useComment();
const Comments = ({ comments, handleAddComments }) => {
  const handleComment = () => {
    let newComments = {
      id: Date.now(),
      text: showText,
      replies: [],
    };
    const updatedTree = addComment(comments, comments.id, newComments);
    handleAddComments(updatedTree);
    setShowText("");
    setShowInput(false);
  };

  return (
    <>
      {/* 其他评论展示代码 */}
      <div>
        <button onClick={() => setShowInput(true)}>Reply</button>
        {showInput && (
          <>
            <input
              autoFocus
              type="text"
              value={showText}
              onChange={(e) => setShowText(e.target.value)}
            />
            <button disabled={!showText} onClick={handleComment}>
              Comment
            </button>
            <span
              style={{ cursor: "pointer" }}
              onClick={() => setShowInput(false)}
            >
              X
            </span>
          </>
        )}
      </div>
      {/* 递归渲染子评论 */}
      {comments.replies.map(reply => (
        <Comments key={reply.id} comments={reply} handleAddComments={handleAddComments} />
      ))}
    </>
  )
};

父组件代码 #

export default function App() {
  const [comments, setComments] = useState(commentData);

  const handleAddComments = (updatedTree) => {
    setComments(updatedTree);
  };

  return (
    <>
      <Comments
        key={comments.id}
        comments={comments}
        handleAddComments={handleAddComments}
      />
    </>
  );
}

评论初始数据 #

export const commentData = {
  id: "1",
  text: "Hello world! How are you?",
  replies: [
    {
      id: "2",
      text: "Hey, I am fine, wau?",
      replies: [
        {
          id: "3",
          text: "Hello, I am food, How are you?",
          replies: [
            {
              id: "4",
              text: "Life sucks man!",
              replies: [
                {
                  id: "5",
                  text: "Haha, I can relate :)",
                  replies: [],
                },
              ],
            },
          ],
        },
      ],
    },
  ],
};

错误截图 #

问题根源与解决方案 #

问题根源 #

1. 输入框state赋值错误：原handleComment函数中，错误地将整个评论树对象updatedTree赋值给绑定输入框的showText状态，输入框value仅支持字符串，对象转字符串后显示为[object Object]。
2. 父组件状态未更新：原父组件的handleAddComments仅打印日志，未实际更新全局评论状态，导致新增评论无法正确渲染，错误的state赋值积累后触发明显问题。

修复步骤 #

1. 修正子组件状态逻辑：移除setShowText(updatedTree)，改为调用父组件的handleAddComments传递更新后的评论树，同时清空输入框内容。
2. 完善父组件状态更新：在handleAddComments中调用setComments更新全局评论状态。
3. 递归传递props：子评论递归渲染时，将handleAddComments传递给下层组件，保证所有层级的评论添加都能触发全局状态更新。

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