React状态从Object转Array后渲染旧状态引发map报错求助

问题场景与简化代码 #

const Certificates = () => {
  const [currentList, setCurrentList] = useState(false);
  const [sort, setSort] = useState('posted');

  useEffect(() => {
    if (gameDetails) {
      setCurrentList({})
    }
  }, [gameDetails])

  useEffect(() => {
    if (sort === 'alphabetical') {
      setCurrentList([])
    }
  }, [sort])

  return (
    <>
      {
        currentList && sort === 'posted' && Object.keys(currentList)
      }
      {
        currentList && sort === 'alphabetical' && currentList.map
      }
    </>
  )
}

currentList状态会根据排序方式在Object和Array之间切换：

• 排序为posted时，按Object结构处理渲染
• 排序为alphabetical时，按Array结构处理渲染

切换排序时触发currentList.map is not a function错误，日志显示状态变更后React会先渲染旧的Object状态，再更新为新的Array状态，旧状态的残留导致了类型不匹配错误。

1. 强化条件判断：同时校验状态类型 #

不要仅依赖sort变量判断渲染逻辑，同时校验currentList的实际类型，从根源避免类型不匹配：

return (
  <>
    {/* 仅当currentList是对象且排序为posted时渲染 */}
    {
      typeof currentList === 'object' && !Array.isArray(currentList) && sort === 'posted' && 
      Object.keys(currentList).map(key => (
        <div key={key}>{currentList[key]}</div>
      ))
    }
    {/* 仅当currentList是数组且排序为alphabetical时渲染 */}
    {
      Array.isArray(currentList) && sort === 'alphabetical' && 
      currentList.map(item => (
        <div key={item.id}>{item.name}</div>
      ))
    }
  </>
)

2. 统一状态结构（推荐方案） #

避免在同一状态变量中混用不同数据类型，改用包含类型标记的统一对象结构，彻底消除类型歧义：

const Certificates = () => {
  // 统一状态格式：{ type: 'posted' | 'alphabetical', data: Object | Array }
  const [currentList, setCurrentList] = useState({ type: 'posted', data: {} });
  const [sort, setSort] = useState('posted');

  useEffect(() => {
    if (gameDetails) {
      setCurrentList({ type: 'posted', data: {} });
    }
  }, [gameDetails]);

  useEffect(() => {
    if (sort === 'alphabetical') {
      // 替换为实际的数组数据
      setCurrentList({ type: 'alphabetical', data: [] });
    } else {
      // 切换回posted排序的对象数据
      setCurrentList({ type: 'posted', data: {} });
    }
  }, [sort]);

  return (
    <>
      {currentList.type === 'posted' && 
        Object.keys(currentList.data).map(key => (
          <div key={key}>{currentList.data[key]}</div>
        ))
      }
      {currentList.type === 'alphabetical' && 
        currentList.data.map(item => (
          <div key={item.id}>{item.name}</div>
        ))
      }
    </>
  )
}

3. 使用useRef追踪最新状态（应急方案） #

如果暂时无法修改状态结构，可用useRef同步最新状态，渲染时直接取ref的当前值，绕过旧状态的渲染问题：

const Certificates = () => {
  const [currentList, setCurrentList] = useState(false);
  const [sort, setSort] = useState('posted');
  const latestListRef = useRef(currentList);

  // 每次状态更新时同步ref
  useEffect(() => {
    latestListRef.current = currentList;
  }, [currentList]);

  useEffect(() => {
    if (gameDetails) {
      setCurrentList({});
    }
  }, [gameDetails]);

  useEffect(() => {
    if (sort === 'alphabetical') {
      setCurrentList([]);
    }
  }, [sort]);

  return (
    <>
      {
        typeof latestListRef.current === 'object' && !Array.isArray(latestListRef.current) && sort === 'posted' &&
        Object.keys(latestListRef.current).map(key => (
          <div key={key}>{latestListRef.current[key]}</div>
        ))
      }
      {
        Array.isArray(latestListRef.current) && sort === 'alphabetical' &&
        latestListRef.current.map(item => (
          <div key={item.id}>{item.name}</div>
        ))
      }
    </>
  )
}

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