React下拉选择后useState数据无法渲染问题求助

核心问题 #

你的代码里useEffect的依赖数组是空的，这意味着它只会在组件首次挂载时执行一次。此时selectedCollection的初始值是null，导致请求的URL为/api/xpredict/null，无法获取有效数据。当你通过下拉框选择集合时，selectedCollection状态更新，但useEffect没有监听这个状态变化，所以不会重新发起请求，页面也就无法渲染新数据。

修复步骤 #

1. 给useEffect添加依赖项：把selectedCollection加入依赖数组，这样每次选中的集合变化时，都会触发新的请求。
2. 过滤无效请求：在fetchCollection函数里增加判断，当selectedCollection为空或null时，不发起请求（比如默认的空选项）。
3. 简化状态更新函数：handleSelectedCollection只是更新状态，不需要async修饰。

修正后的代码 #

import { useEffect, useState } from "react"

const Collections = () => {
  const [data, setData] = useState(null)
  const [selectedCollection, setSelectedCollection] = useState("") 
  const collectionList = ["participants", "kits", "visits"]

  const handleSelectedCollection = (collection) => {
    setSelectedCollection(collection)
  }

  useEffect(() => {
    const fetchCollection = async () => {
      // 过滤空值，避免无效请求
      if (!selectedCollection) return
      
      const response = await fetch(`/api/xpredict/${selectedCollection}`)
      const json = await response.json()

      if (response.ok) {
        setData(json)
      }
    }
    fetchCollection()
  }, [selectedCollection]) // 监听selectedCollection的变化

  return (
    <div className="participants-details">
      <h2>selection</h2>

      <select onChange={(e) => handleSelectedCollection(e.target.value)}>
        <option value="">Select a collection</option>
        {collectionList.map((collection, index) => (
          <option key={index} value={collection}>{collection}</option>
        ))}
      </select>
      <div>
        {data && data.map((p) => (
          <p key={p._id}>{p._id}</p>
        ))}
      </div>
    </div>
  )
}

export default Collections

内容的提问来源于stack exchange，提问作者Simon West-Bulford