reactjs React设定器警告：函数作为React子项无效

z4bn682m 于 2022-12-03 发布在 React

关注(0)|答案(2)|浏览(117)

这是我的第一个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子项无效”。

reactjs

来源：https://stackoverflow.com/questions/74645339/react-setter-warning-functions-are-not-valid-as-a-react-child

2条答案

按热度按时间

thigvfpy1#

这不是使用useState挂接的方式，如果您需要该值，则应使用以下代码：
const [hours, setHours] = useState()
那么您可以使用hours，就像在上面的示例中使用的那样，现在您给出了一个useState()挂钩作为输入值，这肯定会导致您所遇到的错误。
请跟随this link查看更多关于useState挂钩信息

赞(0）回复(0）举报 2022-12-03

ftf50wuq2#

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)
  }

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs React设定器警告：函数作为React子项无效

2条答案

相关问题

热门标签

最新问答