出现错误：反应中未定义函数答案

【问题标题】：getting error : function is not defined in react出现错误：反应中未定义函数
【发布时间】：2020-09-07 14:18:45
【问题描述】：

我在 react 中做了一些动画代码，但是我收到了这个错误，getKeyFrames 和 getTiming 没有定义，我的代码中有一些问题，它没有得到我的功能

./src/WithLigin.js
  Line 59:5:  'getKeyFrames' is not defined  no-undef
  Line 68:5:  'getTiming' is not defined     no-undef

Search for the keywords to learn more about each error.

在这里我附上了我的整个代码，任何人都可以查看它并帮助我解决这个问题吗？任何帮助将不胜感激。

import React,{ useRef, useState } from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
} from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import { useSpring, animated, useTransition } from 'react-spring';
//import { useGesture } from 'react-use-gesture';
import { AnimationSequence, Animatable } from 'react-web-animation';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
    const scrollingLeft = useSpring({
        from: { transform: "translate(60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true
    });

    const scrollingRight = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true
    });

    const [items, set] = useState([1, 2, 3, 4]);
    const [currentTime,setCurrentTime] = useState('0');
    const [playState,setPlayState] = useState('running');
    const transitions = useTransition(items, item => item.key, {
        from: { transform: 'translate3d(0,-40px,0)' },
        enter: { transform: 'translate3d(0,0px,0)' },
        leave: { transform: 'translate3d(0,-40px,0)' },
    })

    getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

    getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };
    }
    return (
        <Router>
                        <div className="full_width">
                            <AnimationSequence
                                playState={playState}
                                currentTime={currentTime}
                            >
                                <Animatable.div
                                    id="1"
                                    keyframes={this.getKeyFrames()}
                                    timing={this.getTiming(2000)}
                                >
                                    Web Animations API Rocks
                                </Animatable.div>
                                <Animatable.div
                                    id="2"
                                    keyframes={this.getKeyFrames()}
                                    timing={this.getTiming(4000)}
                                >
                                    It really does!
                                </Animatable.div>
                            </AnimationSequence>
                        </div>
        </Router>
    );
};

export default LoginButton;

【问题讨论】：

您正在使用功能组件，this 无效。直接拨打getKeyFrames()。

标签： reactjs

【解决方案1】：

由于这是功能组件，您不能使用this，您需要使用const 定义功能。所以它会是这样的：

const getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

    const getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };
    }

并像这样调用：

<Animatable.div
    id="1"
    keyframes={getKeyFrames()}
    timing={getTiming(2000)}
>
    Web Animations API Rocks
</Animatable.div>
<Animatable.div
    id="2"
    keyframes={getKeyFrames()}
    timing={getTiming(4000)}
>

【讨论】：

【解决方案2】：

您忘记将函数声明为变量（例如：const）：应该是：

const getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

   const getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };

然后因为它是一个功能组件，你不需要使用这个关键字

<Animatable.div
       id="1"
       keyframes={getKeyFrames()}
       timing={getTiming(2000)}
       >
       Web Animations API Rocks
  </Animatable.div>
 <Animatable.div
     id="2"
     keyframes={getKeyFrames()}
     timing={tgetTiming(4000)}
  >

【讨论】：

【解决方案3】：

在此之后更改所有函数代码 - 分配您的函数 const getKeyFrames=() =>{} 并像这样传递 keyframes={getKeyFrames}

 const getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

jsx

      <Animatable.div
         id="1"
         keyframes={getKeyFrames}
         timing={getTiming(2000)}
         >

【讨论】：

你正在使用this！