ReactJS新版本中使用setState更新状态报错：selected genre未定义

核心问题原因 #

你遇到的"selected genre未定义"错误，大概率是初始状态中没有声明selectedGenre字段，导致首次渲染时访问该属性触发undefined报错；或者在渲染逻辑中直接访问了selectedGenre的子属性（比如genre.name），但初始时它为undefined。

分步解决 #

1. 初始化状态时声明selectedGenre #

使用useState定义状态时，必须包含selectedGenre字段，初始值可以设为null或空字符串，确保状态结构完整：

const [allGenres, setAllGenres] = useState({
  genres: [], // 你的类型列表数据
  selectedGenre: null // 初始化选中项为null
});

2. 渲染时做空值判断 #

如果需要展示selectedGenre的详细信息，必须先判断它是否存在，避免访问undefined的子属性：

• 可选链语法（推荐）：

<p>选中类型：{allGenres.selectedGenre?.name}</p>

• 条件渲染：

{allGenres.selectedGenre && (
  <p>选中类型：{allGenres.selectedGenre.name}</p>
)}

3. 确认状态更新逻辑的正确性 #

你的handleGenreSelect函数写法没问题，但要确保setAllGenres对应的是通过useState声明的本地状态，而非props传入的状态。如果选中状态是从父组件传递的，应该调用父组件提供的更新方法，而非自己的setState。

完整示例代码 #

import { useState } from 'react';

const GenreList = () => {
  const [allGenres, setAllGenres] = useState({
    genres: ['动作', '喜剧', '科幻', '悬疑'],
    selectedGenre: null
  });

  const handleGenreSelect = (genre) => {
    setAllGenres((prevState) => ({
      ...prevState,
      selectedGenre: genre,
    }));
  };

  return (
    <div>
      <h3>选择电影类型</h3>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {allGenres.genres.map(genre => (
          <li
            key={genre}
            onClick={() => handleGenreSelect(genre)}
            style={{
              padding: '8px 12px',
              margin: '4px 0',
              cursor: 'pointer',
              backgroundColor: allGenres.selectedGenre === genre ? '#e0e0e0' : '#fff',
              borderRadius: '4px'
            }}
          >
            {genre}
          </li>
        ))}
      </ul>
      {allGenres.selectedGenre && (
        <p style={{ marginTop: '16px' }}>当前选中：{allGenres.selectedGenre}</p>
      )}
    </div>
  );
};

export default GenreList;

内容的提问来源于stack exchange，提问作者Fernando Cedeño Nuez