javascript - 在 useEffect 中使用 prop 函数返回:prop.function 不是函数
问题描述
我目前正在尝试构建一个 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
解决方案
问题与另一个问题有关。我不小心调用了该组件 2 次,忘记调整参数。结案
推荐阅读
- java - 什么是 Java 中的“系统线程”?
- json - row_to_json 将“NULL”导出为“None”
- .htaccess - mod_rewrite 规则不起作用,但我的语法正确
- javascript - Blazor - 动态创建选择框
- linux - 在 ubuntu 中从 CSV 文件读取和创建用户名和密码
- java - 删除java中整数数组输出中的尾随零
- r - 如何使用投资组合分析库中的 optimize.portfolio
- ios - 无法在 Swift 上调用 MenuWillOpen
- apache-spark - 转换 pandas 数据帧会导致一个空的 Spark 数据帧,但不会引发错误或警告
- swift - Swift 5:ObservedObject 未更新