javascript - TypeError: 'caller', 'callee', and 'arguments' properties may not b

admin管理员组

文章数量:1426655

Im getting the error TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls on my code. I have looked at this answer, this answer, this answer, this answer, this answer, and this answer.

I understand that

The 5th edition of ECMAScript (ES5) forbids use of arguments.callee() in strict mode. Avoid using arguments.callee() by either giving function expressions a name or use a function declaration where a function must call itself.

So my question is how do i modify my code to bypass the issue as I don't understand what by either giving function expressions a name or use a function declaration where a function must call itself means in terms of a practical solution....

My hook

export default (initialState, durationInMs = 200, options = {}) => {
  const [internalState, setInternalState] = useState(initialState);

  const debouncedSetter = useDebouncedCallback(
    setInternalState,
    durationInMs,
    options
  );

  return [internalState, debouncedSetter];
};

How I call it in my code

const [searchText, setSearchText] = useDebouncedState("null", 200, {
    maxWait: 1000,
});

Where the error is thrown

 <input
   onChange={(e) => setSearchText.callback(e.target.value)}
 />

useDebouncedCallback function

export interface CallOptions {
    leading?: boolean;
    trailing?: boolean;
}
export interface Options extends CallOptions {
    maxWait?: number;
}
export interface ControlFunctions {
    cancel: () => void;
    flush: () => void;
    pending: () => boolean;
}

export default function useDebouncedCallback<T extends (...args: any[]) => ReturnType<T>>(func: T, wait?: number, options?: Options): DebouncedState<T>;

The error as per the console

Here is the trouble causing code as per the console

    var debounced = react_1.useCallback(function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        var time = Date.now();
        var isInvoking = shouldInvoke(time);
        lastArgs.current = args;
        lastThis.current = _this;
        lastCallTime.current = time;
        if (isInvoking) {
            if (!timerId.current && mounted.current) {
                // Reset any `maxWait` timer.
                lastInvokeTime.current = lastCallTime.current;
                // Start the timer for the trailing edge.
                startTimer(timerExpired, wait);
                // Invoke the leading edge.
                return leading ? invokeFunc(lastCallTime.current) : result.current;
            }
            if (maxing) {
                // Handle invocations in a tight loop.
                startTimer(timerExpired, wait);
                return invokeFunc(lastCallTime.current);
            }
        }
        if (!timerId.current) {
            startTimer(timerExpired, wait);
        }
        return result.current;
    }, [invokeFunc, leading, maxing, shouldInvoke, startTimer, timerExpired, wait]);
    var pending = react_1.useCallback(function () {
        return !!timerId.current;
    }, []);
    var debouncedState = react_1.useMemo(function () { return ({
        callback: debounced,
        cancel: cancel,
        flush: flush,
        pending: pending,
    }); }, [debounced, cancel, flush, pending]);
    return debouncedState;
}
exports.default =

Im getting the error TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls on my code. I have looked at this answer, this answer, this answer, this answer, this answer, and this answer.

I understand that

The 5th edition of ECMAScript (ES5) forbids use of arguments.callee() in strict mode. Avoid using arguments.callee() by either giving function expressions a name or use a function declaration where a function must call itself.

So my question is how do i modify my code to bypass the issue as I don't understand what by either giving function expressions a name or use a function declaration where a function must call itself means in terms of a practical solution....

My hook

export default (initialState, durationInMs = 200, options = {}) => {
  const [internalState, setInternalState] = useState(initialState);

  const debouncedSetter = useDebouncedCallback(
    setInternalState,
    durationInMs,
    options
  );

  return [internalState, debouncedSetter];
};

How I call it in my code

const [searchText, setSearchText] = useDebouncedState("null", 200, {
    maxWait: 1000,
});

Where the error is thrown

 <input
   onChange={(e) => setSearchText.callback(e.target.value)}
 />

useDebouncedCallback function

export interface CallOptions {
    leading?: boolean;
    trailing?: boolean;
}
export interface Options extends CallOptions {
    maxWait?: number;
}
export interface ControlFunctions {
    cancel: () => void;
    flush: () => void;
    pending: () => boolean;
}

export default function useDebouncedCallback<T extends (...args: any[]) => ReturnType<T>>(func: T, wait?: number, options?: Options): DebouncedState<T>;

The error as per the console

Here is the trouble causing code as per the console

    var debounced = react_1.useCallback(function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        var time = Date.now();
        var isInvoking = shouldInvoke(time);
        lastArgs.current = args;
        lastThis.current = _this;
        lastCallTime.current = time;
        if (isInvoking) {
            if (!timerId.current && mounted.current) {
                // Reset any `maxWait` timer.
                lastInvokeTime.current = lastCallTime.current;
                // Start the timer for the trailing edge.
                startTimer(timerExpired, wait);
                // Invoke the leading edge.
                return leading ? invokeFunc(lastCallTime.current) : result.current;
            }
            if (maxing) {
                // Handle invocations in a tight loop.
                startTimer(timerExpired, wait);
                return invokeFunc(lastCallTime.current);
            }
        }
        if (!timerId.current) {
            startTimer(timerExpired, wait);
        }
        return result.current;
    }, [invokeFunc, leading, maxing, shouldInvoke, startTimer, timerExpired, wait]);
    var pending = react_1.useCallback(function () {
        return !!timerId.current;
    }, []);
    var debouncedState = react_1.useMemo(function () { return ({
        callback: debounced,
        cancel: cancel,
        flush: flush,
        pending: pending,
    }); }, [debounced, cancel, flush, pending]);
    return debouncedState;
}
exports.default =

• javascript
• reactjs
• ecmascript-5

Share Improve this question Follow edited Mar 17, 2021 at 18:26 IWI asked Mar 17, 2021 at 17:44 IWIIWI 1,60466 gold badges3131 silver badges6161 bronze badges 6

• I don't see where you're using any of those forbidden properties. Do you use it in useDebouncedCallback? – CertainPerformance Commented Mar 17, 2021 at 17:46
• @CertainPerformance short answer is no. but i added the hook to the question in any case.... – IWI Commented Mar 17, 2021 at 17:51
• Update @CertainPerformance its attached to the hook... – IWI Commented Mar 17, 2021 at 17:57
• If you click on the link in the console, it will show you the location in the code that's problematic. It looks to be in useDebouncedCallback - but all that's in the useDebouncedCallback in the question is a TS definition, not the actual functionality – CertainPerformance Commented Mar 17, 2021 at 18:00
• @CertainPerformance i appended the question with the problematic code from the link – IWI Commented Mar 17, 2021 at 18:26

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 1

The problem was there was outdated code on my prod server, so the code I was looking at was much newer. In the deployed code my usestate hook for setSearchText was missing the .callback, and firing off the wrong error in a way

本文标签：