VM366:1 警告：输入：`ref` 不是道具。尝试访问它将导致返回“undefined”

Question

我尝试使用React并在第一次单击按钮时收到警告消息。我问chatGPT，它说我的所有代码都符合预期。不应该有这个警告。

// App.js
import MyRef from "./MyRef";

export default function App() {
  return (
    <>
      <MyRef />
    </>
  );
}

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

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

导出默认 MyRef

Chrome开发工具控制台中的警告消息： 警告：div:

key

不是道具。尝试访问它将导致

undefined

被返回。如果您需要在子组件中访问相同的值，您应该将其作为不同的 prop 传递。

和

警告：输入：

ref

不是道具。尝试访问它将导致

undefined

被返回。如果您需要在子组件中访问相同的值，您应该将其作为不同的 prop 传递。

同样，这只发生在第一次单击按钮时。 当我改变时： console.log(inputRef.current) 到 console.log(inputRef.当前.值) 当我第一次点击按钮时，警告消息消失了。

如果需要使用console.log(inputRef.current)，如何避免出现警告消息？

Answer 1

嗯，我认为警告来自代码 key="Hello" 的这一部分。您可能不需要在这里使用 key 作为 prop。尝试删除它，看看它是否仍然给你一个警告