React中首次点击按钮打印inputRef.current出现警告的解决方法

问题分析 #

你遇到的两个警告原因分别是：

1. div的key警告：key属性仅用于列表（如map生成的元素）中标识子元素唯一性，单个DOM元素不需要设置key。React会将key作为内部标识，不会传递给DOM元素，直接给单个div设置key属于无效用法，触发警告。
2. input的ref警告：当你直接打印inputRef.current（DOM元素）时，Chrome控制台在生成元素预览时会读取React添加到DOM元素上的内部属性，其中包含ref这个特殊属性——ref是React的内部关联属性，并非DOM元素的可访问props，因此触发警告。当你打印inputRef.current.value时，打印的是普通字符串，控制台不会读取DOM元素的内部属性，警告自然消失。

解决方案 #

1. 移除div上的无效key属性 #

直接删除<div key="hello">中的key="hello"，单个div不需要key属性。修改后的MyRef.js代码：

// MyRef.js
import React, {useRef} from 'react'

const MyRef = () => {
  const inputRef = useRef()
  const handleClick = () => {
    console.log(inputRef.current)
  }
  return (
    <div>
      <input type="text" ref={inputRef}/>
      <button onClick={handleClick}>Click me</button>
    </div>
  )
}

export default MyRef

2. 保留打印inputRef.current同时消除ref警告 #

有两种简单实用的方法：

方法一：使用console.dir打印DOM元素原生属性

console.dir会直接打印DOM元素的原生属性和方法，不会读取React添加的内部属性，因此不会触发ref警告：

const handleClick = () => {
  console.dir(inputRef.current)
}

方法二：复制DOM元素关键属性到普通对象打印

如果你只需要查看DOM元素的核心属性，可以手动复制到普通对象后打印，避免控制台读取React内部属性：

const handleClick = () => {
  const elementInfo = {
    value: inputRef.current.value,
    type: inputRef.current.type,
    id: inputRef.current.id,
    className: inputRef.current.className
    // 按需添加你需要查看的属性
  }
  console.log(elementInfo)
}

最终效果 #

完成上述修改后，首次点击按钮时，控制台不会再出现那两条警告，同时你依然可以查看inputRef.current的相关信息。

内容的提问来源于stack exchange，提问作者黃啓華C.H.