React下拉框选择日期后无法显示全部选项问题求助

问题描述 #

拥有学生数据，希望根据日期筛选并展示学生姓名与ID。目前可选择日期，但选中某一日期后，下拉菜单仅显示该日期，无法查看所有日期选项，需要点击输入框时始终能看到全部日期。

问题根源 #

1. 日期选项集合依赖过滤后的学生列表：你用filterStudent（过滤后的学生数据）生成日期集合dates，当选中某一日期后，filterStudent被过滤为仅包含该日期的学生，导致dates只剩下当前选中的日期，下拉菜单自然只能看到这一个选项。
2. useEffect依赖错误导致无限循环：useEffect的依赖数组包含filterStudent，每次更新filterStudent都会触发useEffect，进而再次更新filterStudent，造成无限循环。
3. 字段解构错误：渲染学生时解构的date字段不存在，原数据里的字段是jdate。

修正方案 #

1. 用原始的students数组生成日期选项，确保日期集合始终是完整的所有可选日期。
2. 不再把过滤后的学生列表存为状态，而是直接根据当前选中的jDate实时计算过滤结果，避免状态更新带来的副作用。
3. 修复字段解构错误，将date改为jdate。
4. 移除不必要的useEffect，简化逻辑。

修正后的完整代码 #

const students = [
  {
    id: 1,
    name: "Tobe",    
    jdate: "12/2/2021",
  },
  {
    id: 2,
    name: "Nina",
    jdate: "15/2/2021",
  },
  {
    id: 3,
    name: "Mike",
    jdate: "12/2/2021",
  },
  {
    id: 4,
    name: "Scott",
    jdate: "14/2/2021",
  },
  {
    id: 5,
    name: "Carlos",
    jdate: "13/2/2021",
  },
]

function App() {
  const [jDate, setJDate] = useState("")

  // 用原始students数组生成完整的日期选项集合
  const dates = Array.from(
    new Set(students.map(st => st.jdate))
  )

  // 实时计算过滤后的学生列表，无需存为状态
  const filteredStudents = jDate 
    ? students.filter(st => st.jdate === jDate) 
    : students
 
  return (
    <div className="App">
      <div>
        <select onChange={e => setJDate(e.target.value)} value={jDate}>
          <option value="" disabled>Select Date</option>
          {dates.map(dt => (
            <option key={dt} value={dt}>{dt}</option>
          ))}
        </select>      
      </div>
      <ul>
        {filteredStudents.map(st => {
          const { name, id, jdate } = st
          return (
            <li key={id}>
              <div>Name: <strong>{name}</strong></div>              
              <div>ID: {id}</div>
              <div>Joining Date: {jdate}</div>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

说明 #

• 现在下拉菜单的日期选项始终基于原始学生数据生成，无论选中哪个日期，点击下拉框都能看到所有可选日期。
• 过滤逻辑改为实时计算，避免了状态更新带来的循环问题，代码更简洁高效。
• 修复了字段显示错误，现在能正确展示学生的加入日期。

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