使用React中的钩子将状态组件替换为功能组件

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>
)
}

显然，您应该阅读有关功能组件和类组件之间差异的文档。

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

如果这种方法在重新发送方面有问题，请尝试将内部代码包装在useCallbackhook:中

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可以从react:导入

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