假設我有一個 App.jsx：應用程序.jsxconst App = () => {    return (        <React.Fragment>            <NavBar />            <BooksList />            <TextEditor />        </React.Fragment>    )}export default App;和是 2BooksList個TextEditor功能組件。在一個組件中，我能夠將編輯器的內容保存到數(shù)據(jù)庫中：編輯器.jsxconst TextEditor = () => {    return(        <*editor related stuff*>    )}const SaveContent = ({ value, icon }) => {    return (        <SaveButton            onMouseDown={async () => {                console.log(JSON.stringify(value));                const response = await fetch('/add_book', {                    method: 'POST',                    headers: {                        'Content-Type': 'application/json'                    },                    body: JSON.stringify(value)                })                if (response.ok) {                    console.log('response okay')                }            }}        >            <Icon icon={icon}></Icon>        </SaveButton>    )}這成功寫入我的數(shù)據(jù)庫。我想讓 BookList 組件在我保存/刪除項目時自動更新數(shù)據(jù)庫的內容。這是我目前擁有的 BookList 組件：BooksList.jsxconst BooksList = () => {    const [books, setBooks] = useState([]);    useEffect(() => {        fetch('/get_books')        .then(response =>             response.json()        .then(data => {            setBooks(data)        })        );    }, [])    return (        <*list of saved editors*>    )}所以在加載時，如果數(shù)據(jù)庫是空的，它什么也不顯示。當我保存到數(shù)據(jù)庫時，它什么也沒顯示，然后當我刷新頁面時，它顯示我想要取回的數(shù)據(jù)。我希望能夠保存數(shù)據(jù)并自動看到上述組件刷新和更新。我是 React 和 JS 的新手，所以任何指針都會很棒。我認為可能需要重寫以使用基于類的組件來更輕松地管理狀態(tài)？但我不確定。我的基本理解是，這useEffect()是基于類的安裝方法的功能等價物。這讓我相信這是可以做到的。但是，我讀過有狀態(tài)組件應該使用基于類的組件。