我有一个组件，根据其prop（pwa: {
//pwa configs...
workboxOptions: {
// ...other Workbox options...
runtimeCaching: [ {
urlPattern: new RegExp('/.*(?:googleapis)\.com.*$/'),
handler: 'staleWhileRevalidate',
}]
}
}
）监听Firestore数据库中的不同文档。
但是，当我更新组件以使用新的listId时，它仍然使用上一个侦听器。
当组件收到新道具时，分离旧侦听器并启动新侦听器的正确方法是什么？
一些代码：
listId我尝试使用import React from 'react';
import PropTypes from 'prop-types';
import { db } from '../api/firebase';
class TodoList extends React.Component {
state = {
todos: [],
};
componentWillMount() {
const { listId } = this.props;
db.collection(`lists/${listId}/todos`).onSnapshot((doc) => {
const todos = [];
doc.forEach((t) => {
todos.push(t.data());
});
this.setState({ todos });
});
};
render() {
const { todos } = this.state;
return (
{todos.map(t => <li>{t.title}</li>)}
);
}
}
TodoList.propTypes = {
listId: PropTypes.object.isRequired,
};
export default TodoList;
，但该组件实际上从未卸载，它只是从父级接收新的道具。
我怀疑我需要类似componentWillUnmount()的内容，但我不确定如何正确处理附加/分离侦听器。
答案 0 :(得分：0)
将key道具传递给TodoList可让该组件按原样运行。