React组件首次渲染时bookTitle为undefined，搜索逻辑异常求助

核心问题 #

1. 初始请求带undefined：组件首次渲染时bookTitle未初始化，直接用它拼接请求URL，导致搜索undefined相关书籍。
2. 无限循环触发请求：useEffect依赖bookTitle，但内部又调用setBookTitle，导致bookTitle反复更新→useEffect反复执行，出现数据闪烁甚至异常回退。
3. 未做空值校验：没有判断data或data.content.title是否存在，万一location.state里的data为空，会直接报错。

修复代码 #

const location = useLocation()
const { data } = location.state || {} // 加默认值避免解构报错
const [apiData, setApiData] = useState<GoogleBooks | null>(null) // 初始设为null，避免渲染旧数据

// 直接从data计算标题，无需额外维护state
const squishedTitle = data?.content?.title ? data.content.title.replace(/ /g, '').toLowerCase() : ''

useEffect(() => {
  // 标题为空时不发起请求，同时清空现有数据
  if (!squishedTitle) {
    setApiData(null)
    return
  }

  // 直接使用计算好的标题，避免依赖冗余state
  fetch(`https://www.googleapis.com/books/v1/volumes?q=${squishedTitle}&key=${import.meta.env.VITE_GOOGLE_API_KEY}`)
    .then(res => res.json())
    .then(response => setApiData(response))
    .catch((err) => console.error(err))
}, [squishedTitle]) // 仅当标题真正变化时触发请求

关键修改点 #

• 移除bookTitle状态：标题由data派生而来，无需单独维护state，避免状态同步混乱。
• 空值安全处理：用可选链data?.content?.title做判断，给location.state加默认空对象防止报错；标题为空时不发起请求，清空现有数据。
• 修正useEffect依赖：依赖计算后的squishedTitle，仅当标题有效变化时触发请求，杜绝循环调用。
• 初始化apiData为null：初始状态不渲染任何内容，只有请求成功后才展示目标书籍。

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