Skip to main content
removeu 18 caracteres do conteúdo; tags editadas; título editado
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

Conversão de componente de classe para componente funcional Como usar componentDidMount, componentWillUnmount e declarar o estado inicial em componentes funcionais?

Estou tentando fazer uma conversão de componente de classe para componente funcional.

O código que tenho é:

  constructor(props) {
    super(props);

    this.state = SelectionToolbarStore.getState();
  }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };
...

O que eu fiz até agora:

const SelectionToolbar = () => {
  // constructor(props) {
  //   super(props);

  //   this.state = SelectionToolbarStore.getState();
  // }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };

O que eu quero fazer agora é transformar esses componentDidMount() e componentWillUnmount() em ReactHooksHooks, mas não estou sabendo como escrever esse.

Também quero se converter this.state = SelectionToolbarStore.getState() em forma de useState() Pensei em para const [state, setState] = useState(SelectionToolbarStore.getState());

Mas está correto, não sei se faz sentido.

Conversão de componente de classe para componente funcional

Estou tentando fazer uma conversão de componente de classe para componente funcional.

O código que tenho é:

  constructor(props) {
    super(props);

    this.state = SelectionToolbarStore.getState();
  }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };
...

O que eu fiz até agora:

const SelectionToolbar = () => {
  // constructor(props) {
  //   super(props);

  //   this.state = SelectionToolbarStore.getState();
  // }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };

O que eu quero fazer agora é transformar esses componentDidMount() e componentWillUnmount() em ReactHooks, mas não estou sabendo como escrever esse this.state = SelectionToolbarStore.getState() em forma de useState() Pensei em const [state, setState] = useState(SelectionToolbarStore.getState());

Mas não sei se faz sentido.

Como usar componentDidMount, componentWillUnmount e declarar o estado inicial em componentes funcionais?

Estou tentando fazer uma conversão de componente de classe para componente funcional.

O código que tenho é:

  constructor(props) {
    super(props);

    this.state = SelectionToolbarStore.getState();
  }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };
...

O que eu fiz até agora:

const SelectionToolbar = () => {
  // constructor(props) {
  //   super(props);

  //   this.state = SelectionToolbarStore.getState();
  // }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };

O que eu quero fazer agora é transformar esses componentDidMount() e componentWillUnmount() em Hooks, mas não estou sabendo como.

Também quero se converter this.state = SelectionToolbarStore.getState() para const [state, setState] = useState(SelectionToolbarStore.getState()); está correto, não sei se faz sentido.

Fonte Link

Conversão de componente de classe para componente funcional

Estou tentando fazer uma conversão de componente de classe para componente funcional.

O código que tenho é:

  constructor(props) {
    super(props);

    this.state = SelectionToolbarStore.getState();
  }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };
...

O que eu fiz até agora:

const SelectionToolbar = () => {
  // constructor(props) {
  //   super(props);

  //   this.state = SelectionToolbarStore.getState();
  // }

  componentDidMount() {
    SelectionToolbarStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    SelectionToolbarStore.removeChangeListener(this.handleChange);
  }

  handleChange = () => {
    this.setState(SelectionToolbarStore.getState());
  };

O que eu quero fazer agora é transformar esses componentDidMount() e componentWillUnmount() em ReactHooks, mas não estou sabendo como escrever esse this.state = SelectionToolbarStore.getState() em forma de useState() Pensei em const [state, setState] = useState(SelectionToolbarStore.getState());

Mas não sei se faz sentido.