React项目出现"Functions are not valid as a React child"错误咨询

快速修复警告 #

你代码里的核心问题是在JSX中直接引用了函数studCheck，而非调用它返回数值。React尝试渲染函数对象，因此抛出警告。

把这一行：

<h2>Parks Visited: { studCheck }</h2>

修改为：

<h2>Parks Visited: { studCheck() }</h2>

不过这种原生DOM查询的方式并不符合React的状态管理逻辑，React更推荐通过状态追踪UI变化，而非直接操作DOM。下面是更规范的实现方案：

符合React规范的正确实现 #

用useState维护已勾选的公园列表，能更高效、贴合React模式地追踪选中状态：

import React, { useState } from 'react'

// 抽离公园列表，避免重复代码
const parksList = [
  "Acadia", "American Samoa", "Arches", "Badlands", "Big Bend",
  "Biscayne", "Black Canyon of the Gunnison", "Bryce Canyon",
  "Canyonlands", "Capitol Reef", "Carlsbad Caverns", "Channel Islands",
  "Congaree", "Crater Lake", "Cuyahoga Valley", "Death Valley",
  "Denali", "Dry Tortugas", "Everglades", "Gates of the Arctic",
  "Gateway arch", "Glacier", "Glacier Bay", "Grand Canyon",
  "Grand Teton", "Great Basin", "Great Sand Dunes", "Great Smoky Mountains",
  "Guadalupe Mountains", "Haleakala", "Hawaii Volcanoes", "Hot Springs",
  "Indiana Dunes", "Isle Royale", "Joshua Tree", "Katmai",
  "Kenai Fjords", "Kings Canyon", "Kobuk Valley", "Lake Clark",
  "Lassen Volcanic", "Mammoth Cave", "Mesa Verde", "Mount Rainier",
  "New River Gorge", "North Cascades", "Olympic", "Petrified Forest",
  "Pinnacles", "Redwood", "Rocky Mountain", "Saguaro",
  "Sequoia", "Shenandoah", "Theodore Roosevelt", "Virgin Islands",
  "Voyageurs", "White Sands", "Wind Cave", "Wrangell - St. Elias",
  "Yellowstone", "Yosemite", "Zion"
]

const Parks = () => {
  // 用状态存储已勾选的公园名称
  const [visitedParks, setVisitedParks] = useState([])

  // 处理复选框切换逻辑
  const handleParkToggle = (parkName) => {
    setVisitedParks(prev => {
      if (prev.includes(parkName)) {
        // 已存在则移除
        return prev.filter(park => park !== parkName)
      } else {
        // 不存在则添加
        return [...prev, parkName]
      }
    })
  }

  return (
    <div>
      <div>
        <h1>National Parks Checklist</h1>
        <nav>
          <ul>
            <li><a href="parks.html">The National Parks</a></li>
            <li><a href="monuments.html">The National Monuments</a></li>
            <li><a href="all.html">All NPS Sites</a></li>
            <li><a href="states.html">States</a></li>
            <li><a href="countries.html">Countries</a></li>
          </ul>
        </nav>
      </div>

      <br />
      
      <div>
        {/* 直接从状态中获取已勾选数量 */}
        <h2>Parks Visited: { visitedParks.length }</h2>
      </div>

      <br />

      <table>
        <tbody>
          {/* 遍历列表生成复选框，减少重复代码 */}
          {parksList.map(park => (
            <tr key={park}>
              <td>
                <label>
                  <input 
                    type="checkbox" 
                    checked={visitedParks.includes(park)}
                    onChange={() => handleParkToggle(park)} 
                  /> 
                  {park}
                </label>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default Parks

该实现的优势： #

• 完全遵循React状态驱动UI的理念，避免直接操作DOM
• 通过数组遍历生成复选框，代码更简洁易维护
• 状态能精准追踪已勾选公园，后续扩展功能（如导出已选列表）更便捷

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