警告: findDOMNode 在 StrictMode 中不被推荐。 findDOMNode 被传递了一个位于 StrictMode 中的产品化实例

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

警告: 在 StrictMode 中不推荐使用 findDOMNode。FindDOMNode 被传递了一个产品化的实例，该实例位于 StrictMode 中。相反，将 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>
)


}
}
288655 次浏览
小开
最佳答案

setState调用看起来像是写到了错误的位置。请确保它在 editTodo对象上:

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

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

  • 标识具有不安全生命周期的组件
  • 关于遗留字符串参考 API 使用的警告
  • 有关使用已弃用的 findDOMNode 的警告
  • 发现意想不到的副作用
  • 检测遗留上下文 API

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

小开

@ 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>

当组件被渲染时，模态也被渲染了，我们尝试改变组件的状态，组件(和模态)将被重新渲染，在这个阶段，模态不能访问状态。

解决此警告的解决方案是使用 裁判反应。引用有助于访问在呈现方法中创建的 DOM 节点或 React 元素。

小开

如果您使用的是来自 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 的问题，它作为评论会更合适，但我没有足够的名声这样做，也许它帮助某人。

这是固定在 v2alpha 上的

小开

对于这种类型的场景，最简单的解决方案是用一个 DOM 元素包装组件，您可以实际将一个 ref 附加到这个 DOM 元素。例如:

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;`
小开

要解决这个问题，只需删除反应。在 index.js 中访问 dom root id 的 StrictMode，这将修复它。

而不是这样:

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

用这句话:

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

我不确定它是否有助于材料 UI 库的使用，但在许多情况下，它可以帮助:

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

一个类似的问题是: 下面解决了这个问题:

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

来自

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

到

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

注意: SnackbarProvider和 React.StrictMode标签是反向的。

小开

我以前见过这个错误，当我使用反应引导程序和反应路由器时 对方。 我替换了

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

和

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

而且没有需要为 NavLink 使用 Link

小开

这是一个材料用户界面库的问题，在新的材料用户界面 v5正式发布之前，这里有一个 临时解决办法

小开

我认为这个问题不是一个错误，而是一个弃用警告。库组件仍然可以工作，但是使用了一个在以后的版本中不再可用的特性。因此必须更新库以使用另一个函数来替换旧函数。

小开

在 语义用户界面反应中，这是一个 已知问题，它们的大部分组件仍然使用 findDOMNode()。这将在 语义用户界面反应版本3中修复，所有这些组件将在其中更新为使用 React.forwardRef()。

起初我以为我做错了什么，花了相当长的时间调查，结果发现这是一个已知的问题。


提交答案