React中Anagram分组显示异常问题求助

问题描述 #

我是React新手，正在通过编写变位词（Anagram）分组功能学习。期望在浏览器中显示结果：

[['silent', 'listen'], ['test'], ['another']]

但实际显示的却是单个字符组成的数组：

["s", "i", "l", "e", "n", "t"]

错误分析与修正 #

你的代码存在两处关键错误：

1. 状态初始化错误 #

原代码中words状态的初始化未使用useState函数，直接进行数组解构：

const [words, setWords] = ["silent", "listen", "test", "another"];

这会导致words被赋值为数组第一个元素"silent"（字符串类型），setWords被赋值为第二个元素"listen"。后续遍历words时，实际是遍历字符串的每个字符，而非预期的单词数组。

修正：使用useState函数初始化状态：

const [words, setWords] = useState(["silent", "listen", "test", "another"]);

2. 变位词分组逻辑错误 #

在分组函数中，首次添加单词时直接将字符串赋值给对象属性：

anangramGroups[sortedWord] = word;

这会导致属性值为字符串类型，后续调用push方法时会报错（字符串没有push方法）。即使修复第一个错误，分组结果也不符合预期。

修正：首次添加时将单词放入数组中：

anangramGroups[sortedWord] = [word];

修正后的完整代码 #

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

export default function App() {
  // 修正：使用useState初始化单词数组状态
  const [words, setWords] = useState(["silent", "listen", "test", "another"]);
  const [groupedAnangrams, setGroupedAnangrams] = useState([]);

  useEffect(() => {
    const groupAnangrams = (words) => {
      const anangramGroups = {};
      const result = [];
      for (const word of words) {
        const sortedWord = word.split("").sort().join("");

        if (anangramGroups[sortedWord]) {
          anangramGroups[sortedWord].push(word);
        } else {
          // 修正：首次添加时存入数组
          anangramGroups[sortedWord] = [word];
        }
      }
      for (const group in anangramGroups) {
        result.push(anangramGroups[group]);
      }

      return result;
    };

    const grouped = groupAnangrams(words);
    setGroupedAnangrams(grouped);
  }, [words]);
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{JSON.stringify(groupedAnangrams, null, 2)}</h2>
    </div>
  );
}

效果验证 #

修正后，浏览器会正确显示预期的变位词分组结果：

[
  ["silent", "listen"],
  ["test"],
  ["another"]
]

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