React中使用useMemo时仅返回数组首元素问题求助

问题根源 #

你在接收useMemo返回值时误用了数组解构语法：useMemo本身返回的是完整的排序后数组，但const [sortedList] = useMemo(...)这种写法只会提取返回数组的第一个元素赋值给sortedList，这就是页面只显示单个元素的原因。

修复后的代码 #

去掉数组解构的方括号，直接接收完整数组即可：

import { useState, useMemo } from "react";

export default function MemoExample2() {
  const [nameList, setNameList] = useState(['a', 'b', 'r', 'e']);

  // 直接接收useMemo返回的完整数组，无需解构
  const sortedList = useMemo(() => {
    return [...nameList].sort();
  }, [nameList]);

  function addLetter(e) {
    const letter = document.querySelector("#letter").value;
    setNameList([...nameList, letter]);
  }

  return <>
    <div>Unsorted: {nameList.join(' ,')}</div>
    <div>Sorted: {sortedList.join(',')}</div>
    <input type="text" id="letter" />
    <button onClick={addLetter}>Add Name</button>
  </>
}

额外优化建议 #

避免直接操作DOM（document.querySelector），改用React的useRef获取输入框值，更符合React状态管理逻辑：

import { useState, useMemo, useRef } from "react";

export default function MemoExample2() {
  const [nameList, setNameList] = useState(['a', 'b', 'r', 'e']);
  const letterInputRef = useRef(null);

  const sortedList = useMemo(() => {
    return [...nameList].sort();
  }, [nameList]);

  function addLetter() {
    const letter = letterInputRef.current.value.trim();
    if (letter) {
      // 使用函数式更新确保获取最新状态
      setNameList(prevList => [...prevList, letter]);
      letterInputRef.current.value = ''; // 添加后清空输入框
    }
  }

  return <>
    <div>Unsorted: {nameList.join(' ,')}</div>
    <div>Sorted: {sortedList.join(',')}</div>
    <input type="text" ref={letterInputRef} />
    <button onClick={addLetter}>Add Name</button>
  </>
}

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