React setter警告:函数作为React子对象无效

Question

这是我的第一个React项目，所以如果这是一个基本问题，请提前感谢您对我的支持。我有两个范围输入，当这些范围输入被移动时，我试图执行计算和更新内容。这是我的文件:

index.tsx

import * as React from 'react'
export default function Index() {
let hours = React.useState(2)
const setHours = (newHours) => {
hours = newHours;
setPrice(hours, price);
}
let miles = React.useState(18)
const setMiles = (newMiles) => {
miles = newMiles;
setPrice(hours, price);
}
let price = React.useState(0)
const setPrice = (hours, miles) => {
price = hours * 6.00 + miles * 0.32
}
setPrice(hours, miles);

return (
<div>
<p className="font-medium">Estimated fee of ${price} for a {hours} hour, {miles} mile trip.</p>
<input onChange={(e) => setHours(e.target.value)} value={hours} type="range" min="1" max="24" />
<input onChange={(e) => setMiles(e.target.value)} value={miles} type="range" min="1" max="200" />
</div>
);
}

不幸的是，这会抛出一个警告"函数作为React的子节点是无效的。">

Answer 1

你不应该这样使用useState钩子，如果你想要这个值，你应该使用以下方法:

const [hours, setHours] = useState()

那么你可以使用hours，就像你在上面的例子中使用的那样，现在你给了一个useState()钩子作为你的输入值，这肯定会导致你的错误。
请点击此链接查看更多关于useState钩子

Answer 2

const [hours, setHours] = React.useState(2)
const [miles, setMiles] = React.useState(18)
const [price, setPrice] = React.useState(0)
const handleHours = (newHours) => {
setHours(newHours)
handlePrice()
}
const handleMiles = (newMiles) => {
setMiles(newMiles)
handlePrice()
}
const handlePrice = () => {
let newPrice = hours * 6.00 + miles * 0.32;
setPrice(newPrice)
}