경고: findDOMName은 StrictMode에서 사용되지 않습니다. findDOMName은 StrictMode 내의 Transition 인스턴스를 전달받았습니다.

경고: findDOMName은 StrictMode에서 사용되지 않습니다. findDOMName은 StrictMode 내의 Transition 인스턴스를 전달받았습니다.

컴포넌트 내에서 기능을 소품으로 사용하려고 하는데 이 컴포넌트는 다른 컴포넌트의 하위 컴포넌트입니다.근데 기능이 안 돼요?이유를 알 수 있을까요?콘솔에 표시되는 경고입니다.

경고: findDOMNode는 StrictMode에서 사용되지 않습니다. 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>
    )

  }
}

in index.js 변경<React.StrictMode><App /><React.StrictMode>로.<App />이 경고는 표시되지 않습니다.strict 모드가 도움이 된다는 점에 유의해 주세요.

• 안전하지 않은 라이프 사이클이 있는 컴포넌트 식별
• 레거시 문자열 참조 API 사용에 대한 주의
• 사용되지 않는 findDOMName 사용에 대한 경고
• 예기치 않은 부작용 검출
• 레거시 컨텍스트 API 탐지

삭제하기 전에 https://reactjs.org/docs/strict-mode.html 를 참조해 주세요.

모달 또는 카루셀을 사용하는 경우react-bootstrap회피책은 애니메이션을 비활성화하는 것입니다.이 기능을 끄면 경고가 사라집니다.

모달의 경우:

<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 질문에 답변하지 않으면 코멘트로 더 잘 맞는다는 것을 알지만, 저는 그렇게 할 만한 평판이 없어서 누군가에게 도움이 될 수도 있습니다.

편집: 이것은 v2 alpha에서 수정되었습니다.

@Ross Allen의 응답은 기본 문제(경고)와 관련이 없으며 코드의 구문 문제를 해결했습니다.

@Ali Rehman의 응답은 경고와 더 관련이 있지만 문제를 올바르게 해결하지 못하고 경고를 더 이상 표시하지 않도록 숨길 뿐입니다.왜 안 돼, 우리가 추천을 신경 안 쓴다면.

네, 이 문제는 리액트에서 발생하고 있습니다.Strict 모드:

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

Strict Mode는 응용 프로그램에서 발생할 수 있는 문제를 강조 표시하기 위한 도구입니다.하위 항목에 대한 다음과 같은 추가 검사 및 경고를 활성화합니다.

• 안전하지 않은 라이프 사이클이 있는 컴포넌트 식별
• 레거시 문자열 참조 API 사용에 대한 주의
• 사용되지 않는 findDOMName 사용에 대한 경고
• 예기치 않은 부작용 검출
• 레거시 컨텍스트 API 탐지

질문에서 오류 역추적이 완전히 제공되지 않기 때문에 렌더링 메서드의 요소를 참조하기 때문에 이 문제는 사용되지 않는 findDOMName 사용에 대한 경고와 관련이 있을 수 있습니다.

<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를 사용하는 것입니다.참조는 렌더 방식으로 작성된 DOM 노드 또는 React 요소에 액세스하는 데 도움이 됩니다.

setState콜이 잘못된 장소에 입력되고 있는 것 같습니다.해 주세요.editTodo★★★★★★★★★★★★★★★★★★:

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

material-ui 라이브러리를 사용할 때 도움이 될지는 모르겠지만 대부분의 경우 도움이 됩니다.

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

Semantic UI React에서는 이미 알려진 문제이며 대부분의 컴포넌트가 아직 사용되고 있습니다.findDOMNode()이 문제는 시멘틱 UI React v3에서 수정되며, 이 컴포넌트는 모두 업데이트되어 사용할 수 있습니다.React.forwardRef().

처음에는 제가 뭔가 잘못하고 있다고 생각했고, 꽤 오랜 시간을 들여 조사했지만, 그것이 이미 알려진 문제라는 것을 알게 되었습니다.

이것은 재료의 발행입니다.UI 라이브러리 및 새로운 재료 이전에 임시 솔루션이 있습니다.UI v5가 공식 출시됨

리액트 부트스트랩과 리액트라우터돔을 서로 나란히 사용했을 때 이 오류가 발생한 적이 있습니다.

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

와 함께

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

NavLink에는 링크를 사용할 필요가 없습니다.

이러한 유형의 시나리오에 대한 가장 간단한 해결책은 실제로 참조를 연결할 수 있는 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;`

이 문제는 오류가 아니라 권장 해제 경고라고 생각합니다.라이브러리 구성 요소는 계속 작동하지만 이후 릴리스에서는 더 이상 사용할 수 없는 기능을 사용합니다.따라서 라이브러리를 업데이트하여 다른 기능을 사용하여 이전 기능을 대체해야 합니다.

유사한 문제:다음은 문제를 해결했습니다.

서서 ReactDOM.render(), 변경

부터

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

로.

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

의:SnackbarProvider&React.StrictMode태그가 반전됩니다.

이 문제를 해결하려면 React를 삭제하십시오.index.js의 StrictMode를 사용하면 돔 루트 ID에 액세스할 수 있습니다.

이것 대신:

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

다음 행을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/60903335/warning-finddomnode-is-deprecated-in-strictmode-finddomnode-was-passed-an-inst