Question

如何使用功能组件和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>
 )
}

显然，您应该read the docs了解功能组件以及类组件之间的区别。

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();
}, [])

您可以从react中导入

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]));
              }
            });
          });
}, [])

在React中使用Hooks将状态组件替换为功能组件

3 个答案: