警告：在 StrictMode 中不推荐使用 findDOMNode。 findDOMNode 传递了一个在 StrictMode 内的 Transition 实例

Question

我正在尝试使用一个函数作为组件内的道具，而这个组件是另一个组件的子组件。 但该功能不起作用。？ 我能知道为什么吗。 这是我在控制台中收到的警告。

警告：在 StrictMode 中不推荐使用 findDOMNode。 findDOMNode 传递了一个位于 StrictMode 内的 Transition 实例。 相反，直接向要引用的元素添加 ref

这是我的代码

class Todo extends Component {
  state = {
    show: false,
    editTodo: {
      id: "",
      title: "",
      isCompleted: false
    }
  }
  handleClose = () => {
    this.setState({ show: false })
  }
  handleShow = () => {
    this.setState({ show: true })
  }
  getStyle () {
    return {
      background: '#f4f4f4',
      padding: '10px',
      borderBottom: '1px #ccc dotted',
      textDecoration: this.props.todo.isCompleted ? 'line-through'
        : 'none'
    }
  }
  //this method checks for changes in the edit field
  handleChange = (event) => {
    this.setState({ title: event.target.value })
    console.log(this.state.editTodo.title);
  }

  render () {
    //destructuring
    const { id, title } = this.props.todo;
    return (
      <div style={this.getStyle()}>
        <p>
          <input type='checkbox' style={{ margin: "0px 20px" }} onChange={this.props.markComplete.bind(this, id)} /> {''}
          {title}
          <Button style={{ float: "right", margin: "0px 10px" }} variant="warning" size={"sm"} onClick={this.handleShow}>Edit</Button>{' '}
          <Button style={{ float: "right" }} variant="danger" size={"sm"} onClick={this.props.DelItem.bind(this, id)}>Delete</Button>
        </p>
        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Edit your Task!</Modal.Title>
          </Modal.Header>
          <Modal.Body >
            <FormGroup >
              <Form.Control
                type="text"
                value={this.state.editTodo.title}
                onChange={this.handleChange}
              />
            </FormGroup>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
                          </Button>
            <Button variant="primary" onClick={this.handleClose}>
              Save Changes
                          </Button>
          </Modal.Footer>
        </Modal>
      </div>
    )

  }
}

Answer 1

在 index.js 中，将<React.StrictMode><App /><React.StrictMode>更改为<App /> ，您将不会看到此警告。 请注意，严格模式可以帮助您

• 识别生命周期不安全的组件
• 关于旧字符串引用 API 使用的警告
• 有关已弃用的 findDOMNode 用法的警告
• 检测意外的副作用
• 检测遗留上下文 API

删除之前请参考https://reactjs.org/docs/strict-mode.html 。

Answer 2

如果您使用的是来自react-bootstrap的 Modal 或 Carousel，则解决方法是禁用动画。 关闭它们会使警告消失。

对于模态：

<Modal animation={false}>
    <Modal.Header closeButton>
        <Modal.Title>Title</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        Content
    </Modal.Body>
</Modal>

对于轮播：

<Carousel slide={false} fade={false}>
    <Carousel.Item>
      Scene 1
    </Carousel.Item>
    <Carousel.Item>
      Scene 2
    </Carousel.Item>
</Carousel>

我知道一旦它不回答 OP 问题，它更适合作为评论，但我没有足够的声誉来这样做，也许它可以帮助某人。

Answer 3

@Ross Allen 的响应与基本问题（警告）无关，它解决了代码中的语法问题。

@Ali Rehman 的回应更多地与警告有关，但它也没有正确解决问题，它只是隐藏了问题，使警告不再出现.. 如果我们不关心弃用，为什么不呢！

是的，问题来自 React.StrictMode：

<React.StrictMode>
 <App />
</React.StrictMode>

StrictMode 是一种用于突出应用程序中潜在问题的工具。 它会为其后代激活额外的检查和警告，例如：

• 识别生命周期不安全的组件
• 关于旧字符串引用 API 使用的警告
• 有关已弃用的 findDOMNode 用法的警告
• 检测意外的副作用
• 检测遗留上下文 API

由于问题中没有完全给出错误回溯，我猜这个问题与关于已弃用的 findDOMNode 用法的警告有关，因为引用了渲染方法中的元素：

<Modal show={this.state.show} onHide={this.handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Edit your Task!</Modal.Title>
      </Modal.Header>
      <Modal.Body >
        <FormGroup >
          <Form.Control
            type="text"
            value={this.state.editTodo.title}
            onChange={this.handleChange}
          />
        </FormGroup>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={this.handleClose}>
          Close
                      </Button>
        <Button variant="primary" onClick={this.handleClose}>
          Save Changes
                      </Button>
      </Modal.Footer>
    </Modal>

当组件被渲染时，模态也被渲染了，我们尝试改变组件的状态，组件（以及模态）将重新渲染，在这个阶段模态无法访问状态.

解决警告的解决方案是使用React refs 。 Refs 有助于访问在 render 方法中创建的 DOM 节点或 React 元素。

Answer 4

setState调用看起来好像写错了地方。 确保它在editTodo对象上：

    handleChange = (event) => {
        this.setState(state => ({
          editTodo: {
            ...state.editTodo,
            title: event.target.value,
          },
        }));
    }

Answer 5

我不确定它在使用 material-ui 库时是否有帮助，但在许多情况下这会有所帮助：

const nodeRef = React.useRef(null);
return <div>
  <CSSTransition ... nodeRef={nodeRef}>
    <div ref={nodeRef}> ... </div>
  </CSSTransition>
</div>

Answer 6

我以前见过这个错误，当我并排使用 react-bootstrap 和 react-router-dom 时。 我换了

<Link to="/foo">sth</Link>

和

 <LinkContainer to="/foo/bar">
  <Button>Foo</Button>
</LinkContainer>

并且无需为 NavLink 使用 Link

Answer 7

我正在尝试使用功能作为组件内部的支持，而该组件是另一个组件的子代。 但是该功能不起作用。 我能知道为什么吗。 这是我在控制台中收到的警告。

警告：StrictMode中不建议使用findDOMNode。 findDOMNode传递了StrictMode内部的Transition实例。 而是直接将引用添加到要引用的元素

这是我的代码

class Todo extends Component {
  state = {
    show: false,
    editTodo: {
      id: "",
      title: "",
      isCompleted: false
    }
  }
  handleClose = () => {
    this.setState({ show: false })
  }
  handleShow = () => {
    this.setState({ show: true })
  }
  getStyle () {
    return {
      background: '#f4f4f4',
      padding: '10px',
      borderBottom: '1px #ccc dotted',
      textDecoration: this.props.todo.isCompleted ? 'line-through'
        : 'none'
    }
  }
  //this method checks for changes in the edit field
  handleChange = (event) => {
    this.setState({ title: event.target.value })
    console.log(this.state.editTodo.title);
  }

  render () {
    //destructuring
    const { id, title } = this.props.todo;
    return (
      <div style={this.getStyle()}>
        <p>
          <input type='checkbox' style={{ margin: "0px 20px" }} onChange={this.props.markComplete.bind(this, id)} /> {''}
          {title}
          <Button style={{ float: "right", margin: "0px 10px" }} variant="warning" size={"sm"} onClick={this.handleShow}>Edit</Button>{' '}
          <Button style={{ float: "right" }} variant="danger" size={"sm"} onClick={this.props.DelItem.bind(this, id)}>Delete</Button>
        </p>
        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Edit your Task!</Modal.Title>
          </Modal.Header>
          <Modal.Body >
            <FormGroup >
              <Form.Control
                type="text"
                value={this.state.editTodo.title}
                onChange={this.handleChange}
              />
            </FormGroup>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
                          </Button>
            <Button variant="primary" onClick={this.handleClose}>
              Save Changes
                          </Button>
          </Modal.Footer>
        </Modal>
      </div>
    )

  }
}

Answer 8

此类场景的最简单解决方案是使用 DOM 元素包装您的组件，您实际上可以将 ref 附加到它。 例如：

import React, { createRef, Component } from "react";
import ChildComponent from "./child-component";

class MyComponent extends Component {

 componentDidMount() {
  const node = this.wrapper.current;
  /* Uses DOM node  */ 
}

wrapper = createRef();

render () {
return (
  <div ref={this.wrapper}>
    <ChildComponent>{this.props.children}</ChildComponent>
  </div>
 );
 }
}

export default MyComponent;`

Answer 9

一个类似的问题：

在ReactDOM.render()函数中，更改

从

  < React.StrictMode >
    < SnackbarProvider >
          <App/>
    < /SnackbarProvider >
  < /React.StrictMode >

到

  < SnackbarProvider >
    < React.StrictMode >
          <App/>
    < /React.StrictMode >
  < /SnackbarProvider >

注意： SnackbarProvider和React.StrictMode标签是相反的。

Answer 10

这是MaterialUI库的问题，在新的MaterialUI v5正式发布之前，这里有一个临时解决方案

Answer 11

我认为这个问题不是错误，而是弃用警告。 库组件仍然有效，但使用的功能在未来版本中将不再可用。 因此必须更新库以使用另一个函数来替换旧函数。

Answer 12

我正在尝试使用功能作为组件内部的支持，而该组件是另一个组件的子代。 但是该功能不起作用。 我能知道为什么吗。 这是我在控制台中收到的警告。

警告：StrictMode中不建议使用findDOMNode。 findDOMNode传递了StrictMode内部的Transition实例。 而是直接将引用添加到要引用的元素

这是我的代码

class Todo extends Component {
  state = {
    show: false,
    editTodo: {
      id: "",
      title: "",
      isCompleted: false
    }
  }
  handleClose = () => {
    this.setState({ show: false })
  }
  handleShow = () => {
    this.setState({ show: true })
  }
  getStyle () {
    return {
      background: '#f4f4f4',
      padding: '10px',
      borderBottom: '1px #ccc dotted',
      textDecoration: this.props.todo.isCompleted ? 'line-through'
        : 'none'
    }
  }
  //this method checks for changes in the edit field
  handleChange = (event) => {
    this.setState({ title: event.target.value })
    console.log(this.state.editTodo.title);
  }

  render () {
    //destructuring
    const { id, title } = this.props.todo;
    return (
      <div style={this.getStyle()}>
        <p>
          <input type='checkbox' style={{ margin: "0px 20px" }} onChange={this.props.markComplete.bind(this, id)} /> {''}
          {title}
          <Button style={{ float: "right", margin: "0px 10px" }} variant="warning" size={"sm"} onClick={this.handleShow}>Edit</Button>{' '}
          <Button style={{ float: "right" }} variant="danger" size={"sm"} onClick={this.props.DelItem.bind(this, id)}>Delete</Button>
        </p>
        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Edit your Task!</Modal.Title>
          </Modal.Header>
          <Modal.Body >
            <FormGroup >
              <Form.Control
                type="text"
                value={this.state.editTodo.title}
                onChange={this.handleChange}
              />
            </FormGroup>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
                          </Button>
            <Button variant="primary" onClick={this.handleClose}>
              Save Changes
                          </Button>
          </Modal.Footer>
        </Modal>
      </div>
    )

  }
}

Answer 13

要解决此问题，只需从访问 dom 根 ID 的 index.js 中删除 React.StrictMode，即可修复它。

取而代之的是：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

使用这一行：

ReactDOM.render(<App />,document.getElementById('root'));