gpt4 book ai didi

javascript - 警告 : findDOMNode is deprecated in StrictMode. findDOMNode 传递了一个位于 StrictMode 内的 Transition 实例

转载 作者:行者123 更新时间:2023-11-30 23:58:36 25 4
gpt4 key购买 nike

我正在尝试使用函数作为组件内的 prop,并且该组件是另一个组件的子组件。但该功能不起作用。?我可以知道为什么吗?这是我在控制台中收到的警告。

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

这是我的代码

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

}
}

最佳答案

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

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

请引用https://reactjs.org/docs/strict-mode.html在删除它之前。

关于javascript - 警告 : findDOMNode is deprecated in StrictMode. findDOMNode 传递了一个位于 StrictMode 内的 Transition 实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60903335/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com