使用React-Spring开发响应式导航栏报transitions.map不是函数错误

问题原因 #

你遇到的报错是react-spring版本不兼容导致的：你参考的教程使用的是v8版本的react-spring，而你本地安装的是v9及以上版本，两个版本的useTransitionAPI存在差异：

• v8版本中useTransition调用后直接返回数组，可以直接调用.map方法遍历
• v9及以上版本中useTransition调用后返回的是渲染函数，需要执行该函数才能拿到可遍历的过渡项数组

解决方案 #

直接修改JSX中渲染过渡的代码，把原来的.map调用改为函数调用即可：
原来的写法：

// 错误写法（仅适用于v8）
maskTransitions.map(({ item, key, props }) => /* 渲染逻辑 */)
menuTransitions.map(({ item, key, props }) => /* 渲染逻辑 */)

修改后的写法（适用于v9+）：

// 正确写法（适用于v9+）
maskTransitions(({ item, key, props }) => /* 渲染逻辑 */)
menuTransitions(({ item, key, props }) => /* 渲染逻辑 */)

完整修改后的代码 #

import React, { useState } from 'react'
import { useTransition, animated } from 'react-spring'

function Navigation() {
    const [showMenu, setShowMenu] = useState(false);

    const maskTransitions = useTransition(showMenu, {
        from: { position: 'absolute', opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
    })

    const menuTransitions = useTransition(showMenu, {
        from: { opacity: 0, transform: 'translateX(-100%)' },
        enter: { opacity: 1, transform: 'translateX(0%)' },
        leave: { opacity: 0, transform: 'translateX(-100%)' },
    })
    
    
    return (
        <nav>
            <span>
                <svg onClick={() => setShowMenu(!showMenu)} xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-menu-2" width="48" height="48" viewBox="0 0 24 24" strokeWidth="1.5" stroke="#ff105e" fill="none" strokeLinecap="round" strokeLinejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <line x1="4" y1="6" x2="20" y2="6" />
                    <line x1="4" y1="12" x2="20" y2="12" />
                    <line x1="4" y1="18" x2="20" y2="18" />
                </svg>
            </span>

            {
                maskTransitions(({ item, key, props }) =>
                    item && 
                    <animated.div 
                        key={key} 
                        style={props}
                        className="fixed top-0 left-0 z-50 w-full h-full bg-blueGray-t-50"
                        onClick={() => setShowMenu(false)}
                    >
                    </animated.div>
                )
            }

            {
                menuTransitions(({ item, key, props }) =>
                    item && 
                    <animated.div 
                        key={key} 
                        style={props}
                        className="fixed top-0 left-0 z-50 w-4/5 h-full p-3 bg-white shadow"
                    >
                    <span>This is the menu</span>
                    </animated.div>
                )
            } 
        </nav>
    )
}

export default Navigation

额外说明：如果希望完全沿用教程的v8版本写法，可以将本地的react-spring降级到v8版本，执行安装命令npm i react-spring@8即可。

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