钥匙不是道具。尝试访问它会导致 `undefined`

作者

键不是道具。尝试访问它会导致undefined

Key is not a prop. Trying to access it will result in `undefined`

当我们尝试访问React 中组件的 prop时，会出现警告“key不是 prop。尝试访问它将导致
undefined返回” 。key

要解决该错误，请将具有不同名称的 prop 传递给您的组件。

key 不是一个 prop，尝试访问它会导致 undefined

这是警告如何引起的示例。

应用程序.js
// ⛔️ Warning: Header: `key` is not a prop. Trying to access it will result in `undefined` being returned.
// If you need to access the same value within the child component,
// you should pass it as a different prop. (https://reactjs.org/link/special-props)

// 👇️ trying to access key prop
const Header = ({key, text}) => {
  console.log(key);
  return <h2>{text}</h2>;
};

const App = () => {
  const arr = ['Austria', 'Belgium', 'Canada'];

  return (
    <div>
      {arr.map((element, key) => {
        return <Header text={element} key={key} />;
      })}
    </div>
  );
};

export default App;

代码示例中的问题是我们正在尝试访问组件key中的 prop Header。

React 在内部使用key和等 props ref，因此它不会将它们转发到组件并尝试访问这些 props returns 。 undefined

为了解决这个问题，我们必须为该道具使用不同的名称。

应用程序.js
// 👇️ rename key to myKey
const Header = ({myKey, text}) => {
  console.log(myKey);
  return <h2>{text}</h2>;
};

const App = () => {
  const arr = ['Austria', 'Belgium', 'Canada'];

  return (
    <div>
      {arr.map((element, key) => {
        return <Header text={element} key={key} myKey={key} />;
      })}
    </div>
  );
};

export default App;

我们将组件中的keyprop 重命名为并消除了警告。myKeyHeader

确保不要将您尝试访问的 props 命名为key或，因为这些是 React 内部使用的保留名称。 ref

React 不会在组件中转发这些 props 的值，因此尝试访问它们会返回一个undefined值。

确保key道具是唯一的，否则，您会收到“
遇到两个具有相同键的孩子”
警告。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：