如何在React/Next.js中用useState从下拉选项获取两个值？

问题根源 #

1. 下拉选项的value绑定的是电影名称，无法直接获取对应ID；
2. onChange事件错误地将同一值（电影名称）同时赋值给selectedMovie和selectedMovieId；
3. 循环变量命名重复（movies.map((movies, index)），易引发变量混淆；
4. 存在语法错误：Export default应为小写的export default。

修复后的代码 #

export const getServerSideProps = async () => {
  const res = await fetch(`${process.env.BACKEND_URL}/Movies`);
  const data = await res.json();

  return {
    props: {
      movies: data
    }
  }
}

function CreateMovieNight({ movies }) {
  // 初始化状态：若有电影则默认选中第一部，否则为空
  const initialMovie = movies[0] || {};
  const [selectedMovie, setSelectedMovie] = useState(initialMovie.name || "");
  const [selectedMovieId, setSelectedMovieId] = useState(initialMovie.id || "");
  const [selectedSnack, setSelectedSnack] = useState("");

  const handleMovieChange = (event) => {
    const selectedId = event.target.value;
    // 根据选中的ID找到对应的电影对象
    const selectedFilm = movies.find(movie => movie.id == selectedId);
    
    if (selectedFilm) {
      setSelectedMovie(selectedFilm.name);
      setSelectedMovieId(selectedFilm.id);
    }
  }

  return (
    <div>
      <h3>Pick Movie</h3>
      <select
        name="Movie"
        value={selectedMovieId} // 现在用ID作为选中值的标识
        onChange={handleMovieChange}
      >
        {/* 循环变量改为movie，key用唯一的movie.id，value绑定movie.id */}
        {movies.map((movie) => (
          <option key={movie.id} value={movie.id}>
            {movie.name}
          </option>
        ))}
      </select>
      {/* 可添加状态展示用于测试 */}
      <p>选中的电影：{selectedMovie}</p>
      <p>选中的ID：{selectedMovieId}</p>
    </div>
  )
}

export default CreateMovieNight;

关键修改说明 #

• 下拉选项绑定ID：将<option>的value设为movie.id，确保选中时能获取到唯一标识的ID；
• 优化状态更新逻辑：通过find方法根据选中的ID匹配对应的电影对象，分别更新selectedMovie和selectedMovieId状态；
• 修正变量命名：将循环参数从movies改为movie，避免变量冲突；
• 合理初始化状态：若接口返回电影数据，默认选中第一部，提升用户体验；
• 修复语法错误：修正Export default为小写的export default。

另一种可选方案（直接传递电影对象） #

如果不想通过ID匹配，也可以将电影对象序列化为JSON字符串作为value，省去查找步骤：

// onChange事件处理
const handleMovieChange = (event) => {
  const selectedFilm = JSON.parse(event.target.value);
  setSelectedMovie(selectedFilm.name);
  setSelectedMovieId(selectedFilm.id);
}

// 选项渲染
<option key={movie.id} value={JSON.stringify(movie)}>
  {movie.name}
</option>

这种方法需要处理序列化的兼容性，推荐优先使用第一种ID绑定的方案。

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