警告：在 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>
    )

  }
}

原文由 Niroshan_Krish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Ross Allen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 Ali Rehman 发布，翻译遵循 CC BY-SA 4.0 许可协议