无法读取 null 的属性 'suppressHydrationWarning'

Question

我是一个 React 初学者，目前正在学习 NextJS。

我在 CreateSubject.js 中创建了一个简单的组件：

import React from 'react';

export default function CreateSubject(props) {
  return (
    <div>
      <div className="field">
        <label className="label">Name</label>
        <div className="control">
          <input
            ref="input"
            className="input"
            type="text"
          />
        </div>
      </div>
      <div className="field is-grouped is-grouped-right">
        <p className="control">
          <a
            className="button is-primary"
            onClick={props.onClick}
          >
            Validate
          </a>
        </p>
        <p className="control">
          <a className="button is-light">
            Cancel
          </a>
        </p>
      </div>
    </div>
  )
};

此代码无效，我收到以下错误：

Uncaught TypeError: Cannot read property 'suppressHydrationWarning' of null

如果我将此函数更改为组件：

import React from 'react';

export default class CreateSubject extends React.Component {
  render() {
    return (
      <div>
        <div className="field">
...

它运作良好。第一个代码有什么问题？

有关更多信息，我正在使用 NextJS，CreateSubject 是这样调用的：

import React from 'react';
import Navbar from './Navbar';
import Modal from './Modal';
import CreateSubject from './forms/CreateSubject';


let displayShowModal = false;
const createSubject = () => {
  alert('okkkk')
};
export default () => (
  <div>
    <Modal display={displayShowModal} title="Creating subject">
      <CreateSubject onClick={createSubject}/>
    </Modal>
    <Navbar/>
  </div>
);

Answer 1

问题是由于输入字段具有 ref 属性。删除无论如何都没有用的 ref 属性解决了这个问题。

Answer 2

问题是您使用了功能组件，我们应该为它使用 useRef：https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components。另外，将 ref 属性传递给元素时要小心。人们通常将 ref 的名称作为字符串传递，而不是使用 {}。

在你的情况下应该是：

import React, {useRef} from 'react';

export default function CreateSubject(props) {
  const anyName = useRef(null);
...
  <input
    ref={anyName} // not ref="anyName"
    className="input"
    type="text"
   />
...

}

Answer 3

删除输入标签中的 ref 属性。如果您确实需要使用它，请将 useRef 用作 {object}，而不是“String”。

我运行今天在工作中遇到了同样的问题！

无法读取 null 的属性 'suppressHydrationWarning'

Cannot read property 'suppressHydrationWarning' of null

javascript

reactjs

next.js

无法读取 null 的 属性 'suppressHydrationWarning'

Cannot read property 'suppressHydrationWarning' of null

javascript

reactjs

next.js

无法读取 null 的属性 'suppressHydrationWarning'