React年份选择器渲染问题：如何将1901-2021年数组逐个展示为独立选项

Let's break down what's going wrong and fix it step by step:

1. The Core Issue with Your Current Code #

Right now, you're wrapping the entire year.map() result inside a single <option> tag. When React renders this, it converts the array returned by map() into a concatenated string, which is why all years show up in one option instead of separate ones.

On top of that, you're modifying the year state directly in the component render cycle with a for loop. This will cause the array to grow exponentially every time the component re-renders (like when you toggle the email/phone input), which is a big bug waiting to happen.

2. Step-by-Step Fixes #

First: Generate Your Year Array Properly

Since your year range (1901-2020, since your loop uses i < 2021) is fixed, you can generate the array once outside your component (no need for state here unless you plan to modify it later):

// Generate the year array once, outside the component
const yearsArray = Array.from({ length: 2021 - 1901 }, (_, index) => 1901 + index);

If you do need to use state (for example, if you'll filter the years later), use useEffect to initialize it only once:

import React, { useState, useEffect } from 'react'
import './signup.css'

function Signup() {
  const [year, setYear] = useState([])
  
  useEffect(() => {
    const tempYears = []
    for (let i = 1901; i < 2021; i++) {
      tempYears.push(i)
    }
    setYear(tempYears)
  }, []) // Empty dependency array means this runs only on component mount
  
  // Rest of your code...
}

Second: Render Each Year as a Separate Option

Instead of wrapping the map() inside a single <option>, move the map() directly inside the <select> to return individual <option> elements. Don't forget to add a unique key prop (required for React list rendering):

<div>
  <select>
    <option value="">Year</option> {/* Optional default placeholder */}
    {yearsArray.map((year) => (
      <option key={year} value={year}>
        {year}
      </option>
    ))}
  </select>
</div>

3. Full Modified Code #

Here's your complete component with both fixes applied:

import React, { useState } from 'react'
import './signup.css'

// Generate year array once outside the component
const yearsArray = Array.from({ length: 2021 - 1901 }, (_, index) => 1901 + index);

function Signup() {
  const [useEmail, setUseEmail] = useState(true)

  const toggleEmail = () => {
    setUseEmail(prev => !prev) // Cleaner way to toggle boolean state
  }

  return (
    <div className="modalsignup">
      <div className="modal____popupform">
        <img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" className="twitterLogo____signup" />
        <h1 className="signup_____headertext">Create your account</h1>
        <input placeholder="Name" className="placeholder____divcreateaccount"/>
        {useEmail ? (
          <input placeholder="Email" className="placeholder____divcreateaccount" />
        ) : (
          <input placeholder="Phone" className="placeholder____divcreateaccount"/>
        )}
        <div>
          <button className="switcher_____button" onClick={toggleEmail}>
            Use {useEmail ? "phone" : "email"} instead
          </button>
        </div>
        <div>
          <h4 className="birthdate____signup">Date of birth</h4>
          <p className="birthdate______paragraph">This will not be shown publicly. Confirm your own age, even if this account is for a business, a pet, or something else.</p>
        </div>
        <div className="selector_____options">
          {/* Month selector (unchanged) */}
          <div>
            <select className="selector_____months">
              <option value="0">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
          </div>
          {/* Day selector (unchanged) */}
          <div>
            <select className="selector_______days">
              <option value="0">Day</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
            </select>
          </div>
          {/* Fixed Year selector */}
          <div>
            <select>
              <option value="">Year</option>
              {yearsArray.map((year) => (
                <option key={year} value={year}>
                  {year}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div>
          <button className="signup_____button">Next</button>
        </div>
      </div>
    </div>
  )
}
export default Signup

Quick Notes #

• I cleaned up the toggleEmail function to use the functional update form (setUseEmail(prev => !prev)), which is safer for toggling boolean state.
• The yearsArray is generated once outside the component, so it doesn't get recreated every time the component renders.
• Each year option has a unique key (the year itself), which helps React efficiently update the list.

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