React警告求助：Functions are not valid as a React Child 问题

核心错误原因 #

你遇到的「Functions are not valid as a React Child」警告，根源是useState的使用方式完全错误：

• React.useState() 返回的是一个数组 [当前状态值, 状态更新函数]，你直接把这个数组赋值给了hours、miles、price变量。
• 在JSX里渲染这些变量时，数组里的更新函数会被当成React子元素，而React不允许渲染函数作为子节点，所以触发了警告。

除此之外，代码还有几个关键问题：

1. 手动修改状态值（比如hours = newHours）：这不是React的状态更新方式，不会触发组件重新渲染，页面也不会更新。
2. 自定义的setPrice函数直接修改price变量：不符合React状态管理逻辑，而且price本身是数组，这样赋值会导致计算错误。
3. range输入的value是字符串类型，直接用于计算会出现类型错误。

修正后的代码 #

这里提供两种可行的修正方案，选一种即可：

方案1：用useEffect自动计算价格（适合复杂计算场景）

import * as React from 'react'

export default function Index() {
  // 正确解构useState的返回值：[状态值, 状态更新函数]
  const [hours, setHours] = React.useState(2);
  const [miles, setMiles] = React.useState(18);
  const [price, setPrice] = React.useState(0);

  // 监听hours和miles的变化，自动计算价格
  React.useEffect(() => {
    // 把输入的字符串转成数字，避免计算错误
    const calculatedPrice = Number(hours) * 6.00 + Number(miles) * 0.32;
    // 保留两位小数，符合金额显示格式
    setPrice(Number(calculatedPrice.toFixed(2)));
  }, [hours, miles]); // 依赖项：只有当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>
  );
}

方案2：直接在JSX中计算价格（适合简单计算场景）

这种方案不需要额外的price状态，代码更简洁：

import * as React from 'react'

export default function Index() {
  const [hours, setHours] = React.useState(2);
  const [miles, setMiles] = React.useState(18);

  // 直接计算价格并格式化
  const price = Number(hours) * 6.00 + Number(miles) * 0.32;
  const formattedPrice = price.toFixed(2);

  return (
    <div>
       <p className="font-medium">Estimated fee of ${formattedPrice} 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>
  );
}

关键修正点说明 #

1. 正确使用useState：必须通过解构赋值拿到状态值和更新函数，这是React组件状态管理的标准用法。
2. 用setter函数更新状态：比如setHours(e.target.value)，这样React才会触发组件重新渲染，更新页面内容。
3. 处理类型转换：把range输入的字符串值转成数字再计算，避免出现字符串拼接导致的错误。
4. 格式化价格：用toFixed(2)保留两位小数，让金额显示更规范。

内容的提问来源于stack exchange，提问作者rcrusoe