React自定义TextInput组件placeholder值与传入值不符

全局定位硬编码占位文本 #

• 在项目源码目录全局搜索Search Instagram关键字，搜索时排除node_modules目录的匹配结果，定位写入该固定值的文件
• 根据DevTools显示组件props为Search Instagram的现象，可确认当前页面渲染的搜索输入框，并非你修改的search.js文件中的组件
  • 重点校验TextInput组件的import路径：检查路径别名配置是否错误、是否存在多个同名的输入组件文件，导致实际引入的TextInput不是你附上实现代码的那个自定义组件

清除构建缓存重启服务 #

• 开发服务热更新缓存失效时，会出现修改源码后页面仍渲染旧编译结果的问题：
  • 停止当前运行的dev服务进程
  • 删除项目根目录下的node_modules/.cache缓存文件夹
  • 重新启动dev服务，验证placeholder显示是否同步更新为你写入的Search Chocolate

增加临时日志验证组件入参 #

• 在TextInput组件的渲染逻辑中添加临时打印，确认实际接收到的参数值：

  const TextInput = ({ type, placeholder, value, valueChange, ...props }) => {
    console.log('TextInput实际接收的placeholder值：', placeholder)
    return (
      <input
        type={type}
        placeholder={placeholder}
        spellCheck="false"
        autoComplete="false"
        value={value}
        onChange={valueChange}
        {...props}
      />
    )
  }
  

  • 若控制台打印值为你写入的Search Chocolate，但页面显示仍为旧值，属于浏览器层缓存问题
  • 若控制台打印值为Search Instagram，说明存在组件路径错配，实际加载的组件来自其他文件

常见问题排查 #

• 检查是否存在浏览器插件篡改DOM：密码管理器、页面翻译类插件会强制修改输入框的placeholder文本，这类场景下组件传入的props为正确值，仅DOM展示层被修改
• 检查是否存在全局注册的同名搜索组件：若项目中全局引入了第三方搜索组件，会覆盖本地search.js的渲染逻辑，导致修改本地文件不生效

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