React中SearchFilter状态无法传递到RenderItems子组件的问题排查

• RenderItems组件未正确接收props
  这是最常见的问题：

  • 解构时变量名写错（React props严格区分大小写）：

    // 错误示例：把searchFilter写成了小写searchfilter
    const RenderItems = ({ searchfilter, items }) => {
      // 此处searchfilter会是undefined
    }
    

  • 未从props中正确取值，直接使用未定义的变量：

    // 错误示例：没通过props访问searchFilter
    const RenderItems = (props) => {
      // 直接用searchFilter而非props.searchFilter
      const filteredItems = items.filter(item => item.name.includes(searchFilter));
    }
    

• RenderItems内部定义了同名状态
  如果组件内部声明了和props同名的state变量，会直接覆盖传入的props值：

  // 错误示例：内部state覆盖外部props
  const RenderItems = ({ items, searchFilter }) => {
    // 这里的searchFilter初始值为undefined，会覆盖外部传入的props
    const [searchFilter, setSearchFilter] = useState();
    // ...
  }
  

• RenderItems使用React.memo时依赖项配置错误
  若RenderItems用了React.memo且自定义了错误的比较函数，可能导致props更新时组件不重新渲染，但这种情况通常表现为searchFilter不更新，而非直接变成undefined，属于少见的边缘情况。

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