在 useEffect 中使用 prop 函数返回：prop.function 不是函数答案

【问题标题】：Use a prop function inside useEffect return: prop.function is not a function在 useEffect 中使用 prop 函数返回：prop.function 不是函数
【发布时间】：2021-05-03 06:31:03
【问题描述】：

我目前正在尝试构建一个 next.js 应用程序。

所以我要做的就是将一个函数传递给一个组件并使用 useEffect 调用它

我有以下组件来更改父元素的道具。因此我像这样从父级传递函数：

<NumberInput name="height" update={manuelUpdate}></NumberInput>

manuelUpdate 函数是来自实际父级的另一个 props 函数：

const manuelUpdate = (name, value) => {
    props.update(name, value);
};

如果我使用 onclick 函数运行 props.function，它可以正常工作。但是，一旦我尝试在 useEffect 中使用它，它就会返回该函数不是函数。也许我只是想复杂..

这是组件；

const NumberInput = ({ name, min = undefined, max = undefined, ...props }) => {
   
    const minInput = min !== undefined
        ? min
        : null;

    const maxInput = max !== undefined
        ? max
        : null;

    const [numb, setNumb] = useState(0);

    useEffect(() => {
        console.log(props.update)
    }, [numb]);

    const increaseNumb = () => {
        if (numb < maxInput || maxInput == null) {
            setNumb(numb + 1)
        }
        props.update(name, numb)
    };

    const decreaseNumb = () => {
        if (numb < minInput || minInput == null) {
            setNumb(numb - 1)
        }
    };

    const changeHandler = ({ e }) => {
        let n = parseInt(e.target.value)
        if (Number.isNaN(n)) {
            setNumb(numb)
        } else {
            setNumb(n)
        }
    }

    return (
        <div className={styles.def_number_input, styles.number_input}>
            <button onClick={decreaseNumb} className={styles.minus}></button>
            <input className={styles.quantity} name="quantity" value={numb} onChange={(e) => changeHandler({ e })}
                type="number" />
            <button onClick={increaseNumb} className={styles.plus}></button>
        </div>
    );
};

如果我的问题很愚蠢或我的代码混乱，请提前抱歉，我仍在学习中：D

【问题讨论】：

我不确定我是否做对了，但这是我的想法。 manuelUpdate 是 NumberInput 的父函数中的一个函数。因此，当您在正文中写入props.update(name, value); 时，这意味着使用这些参数调用父级的props.update 函数，而不是子级。编译器在 manuelUpdate 定义的词法范围内查找 update 函数，而不是在它被调用的地方。
这不应该是问题，因为我可以在其他任何地方使用该功能。例如调用 const reductionNumb 中的函数是没有问题的。 ://

标签： javascript reactjs web next.js

【解决方案1】：

问题与另一个问题有关。我不小心调用了该组件 2 次，忘记调整参数。结案

【讨论】：