TypeError: transitions.map不是一个带有React的函数

Question

我试图用function制作一个响应性的Navbar，并且我不断地得到错误"TypeError: transitions.map不是一个函数“

我正在学习一个教程，并且使用了相同的代码，所以我不知道为什么要抛出这个错误。

我的理解是，错误是因为menuTransitions没有被识别为数组，但显然是因为上面定义了它。

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" class="icon icon-tabler icon-tabler-menu-2" width="48" height="48" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ff105e" fill="none" stroke-linecap="round" stroke-linejoin="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.map(({ 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.map(({ 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

Answer 1

在react spring版本9中，转换的语法发生了变化。而不是映射，您必须配置一个呈现道具到过渡。因此，要么更改回版本8，要么将代码重构为如下所示：

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