React中state数据作为props传子组件行为异常问题排查

问题1：输入框输入时控制台打印undefined/旧搜索结果 #

输入框输入内容时，每次按键都会触发onChange调用setSearch更新search状态，导致SearchBar组件重新渲染。但animeList只有提交表单调用animeSearch时才会更新，所以此时AnimeCard接收到的要么是初始的undefined（未执行过搜索），要么是上一次的搜索结果，自然会打印这些内容。

问题2：提交搜索时打印两次结果数组 #

这是React**开发环境下严格模式（Strict Mode）**的特性：为了检测潜在问题，严格模式会在开发阶段重复调用组件渲染函数，导致console.log(animeList)执行两次。生产环境下该重复行为会自动消失。

针对性解决方案 #

1. 避免输入时的无效打印

在AnimeCard中，仅在animeList更新且有值时打印，用useEffect监听状态变化实现：

import { useEffect } from 'react'

const AnimeCard = ({animeList}) => {
  useEffect(() => {
    if (animeList) {
      console.log(animeList)
    }
  }, [animeList]) // 仅当animeList变化时触发
}

export default AnimeCard

2. 消除开发环境下的重复打印

上面的useEffect方案已经能解决——严格模式下重复渲染时，若animeList未变化，useEffect不会重复执行。若要彻底避免严格模式的影响，可暂时移除项目根组件外包裹的<React.StrictMode>标签，但不推荐长期这么做，严格模式能帮你提前发现潜在问题。

额外优化：初始状态赋值

给animeList设置初始空数组，减少空值判断的麻烦：

const [animeList, setAnimeList] = useState([])

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