javascript 警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 传递了一个在 StrictMode 内的 Transition 实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/60903335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
提问by Niroshan_Krish
I am trying to use a function as a prop inside a component and this component is a child of another component. But the function is not working.? Can I know why. This is the warning i am receiving in the console.
我正在尝试使用一个函数作为组件内的道具，而这个组件是另一个组件的子组件。但该功能不起作用。？我能知道为什么吗。这是我在控制台中收到的警告。
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference
警告：在 StrictMode 中不推荐使用 findDOMNode。findDOMNode 传递了一个位于 StrictMode 内的 Transition 实例。相反，直接向要引用的元素添加 ref
This is my code
这是我的代码
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>
)
}
}
回答by Ross Allen
The setStatecall looks like it's being written to the wrong place. Make sure it's on the editTodoobject:
该setState电话看起来像它被写入到错误的地方。确保它在editTodo对象上：
handleChange = (event) => {
this.setState({
editTodo: {
...this.state.editTodo,
title: event.target.value,
},
});
}
回答by AdroitSJ
Issue: In your implementation, it is coming up from somewhere like below :
问题：在您的实现中，它来自如下所示的地方：
mount = createMount({strict: true});
Fix: It should be as below:
修复：它应该如下：
mount = createMount(); // by default, it is false
Check on it, that the mount is done properly.
检查它，安装是否正确完成。
