如何在数据库中添加新项时自动更新DOM或组件。我正在使用React Hooks和axios

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const [items, setItems] = useState([]);

useEffect(() => {
  axios.get('/api/items') // 假设这是获取数据库中项的API接口
    .then(response => {
      setItems(response.data);
    })
    .catch(error => {
      console.error(error);
    });
}, []);

return (
  <div>
    {items.map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
);

const addItem = () => {
  const newItem = { name: 'New Item' }; // 假设要添加的项的名称为'New Item'
  
  axios.post('/api/items', newItem) // 假设这是向数据库中添加项的API接口
    .then(response => {
      setItems([...items, response.data]); // 将新项添加到现有的项列表中
    })
    .catch(error => {
      console.error(error);
    });
};