Замените компонент состояния функциональным компонентом, используя зацепки в React

Question

Как заменить этот код из компонента State на функциональный компонент и React Hooks

state = {
    todos: [],
  };

 componentDidMount() {

        fire
          .firestore()
          .collection("todos")
          .onSnapshot((snapshot) => {
            snapshot.docChanges().forEach((change) => {
              if (change.type === "added") {
                let newTodo = change.doc.data();
                this.setState({
                  todos: [...this.state.todos, newTodo],
                });
              }
            });
          });
      }
    });

Answer 1

Попробуйте что-то вроде:

function MyComponent() {
  const [todos, setTodos] = React.useState([])

  React.useEffect(() => {
    fire
      .firestore()
      .collection("todos")
      .onSnapshot((snapshot) => {
        snapshot.docChanges().forEach((change) => {
          if (change.type === "added") {
            let newTodo = change.doc.data();
            setTodos([...todos, newTodo]);
          }
        });
      });
  }, [])

  return (
    <div>{/* ... */}</div>
 )
}

Очевидно, вам следует прочитать документы о функциональных компонентах и ​​разнице между компонентами класса.

Answer 2

const [todos, setTodos] = useState([])

 useEffect(() => {

        fire
          .firestore()
          .collection("todos")
          .onSnapshot((snapshot) => {
            snapshot.docChanges().forEach((change) => {
              if (change.type === "added") {
                let newTodo = change.doc.data();
                setTodos((prevTodos) => [...prevTodos, newTodo]);
              }
            });
          });
      }
    });

}, [])

Если при таком подходе возникнут проблемы с перерисовкой, попробуйте обернуть внутренний код в ловушку useCallback:

     const makeTodos = useCallback(() => {
        fire
          .firestore()
          .collection("todos")
          .onSnapshot((snapshot) => {
            snapshot.docChanges().forEach((change) => {
              if (change.type === "added") {
                let newTodo = change.doc.data();
                setTodos((prevTodos) => [...prevTodos, newTodo]);
              }
            });
          });
      }
    });
  }, [])

Затем вызовите эту функцию в useEffect:

useEffect(() => {
  makeTodos();
}, [])

usseEffect , useState и useCallback, которые вы можете импортировать из реакции:

Import React, {useState, useEffect, useCallback}  from 'react'

Answer 3

const [todos, setTodos] = React.useState([]);

React.useEffect(() => {
           fire
          .firestore()
          .collection("todos")
          .onSnapshot((snapshot) => {
            snapshot.docChanges().forEach((change) => {
              if (change.type === "added") {
                let newTodo = change.doc.data();
                setTodos(prevTodos => ([...prevTodos, newTodo]));
              }
            });
          });
}, [])