TypeError: transitions.map is not a function with React-Spring

Question

我正在尝试使用 React 制作响应式导航栏，但我不断收到错误消息“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>
            )
        }

TypeError: transitions.map is not a function with React-Spring

TypeError: transitions.map is not a function with React-Spring

javascript

reactjs

react-spring