在EditContact中，用户更新他们当前的联系人，EditContact表单的提交按钮发送一个axios请求来更新联系人并更改状态。当它改变状态时，它不会导致重新呈现，我必须刷新页面才能看到变化。我对put请求的响应也发送回更新的数据，但我的setContacts可能有问题。我尝试过不使用回调函数来设置状态，而是使用map函数的返回数组来设置状态。另外，我在editContactHandler中将setContacts设置为空数组，这确实会导致重新呈现。
App.js

function App() {
  const [contacts, setContacts] = useState([]);

  const editContactHandler = async (contact) => {
    try {
      const response = await axios.put(
        `http://localhost:3006/contacts/${contact.id}`,
        contact
      );
      setContacts((prevContacts) =>
        prevContacts.map((prevContact) => {
          return prevContact.id === contact.id ? response.data : prevContact;
        })
      );
    } catch (error) {
      console.log(error);
    }
  };

EditContact.js

const EditContact = (props) => {
  const params = useParams();
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    id: params.id,
    firstName: '',
    lastName: '',
    email: '',
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
  };

  const handleUpdate = (e) => {
    e.preventDefault();
    if (formData.firstName === '' || formData.email === '') {
      alert('All fields are mandatory');
      return;
    }
    props.editContactHandler(formData);
    setFormData({ id: params.id, firstName: '', lastName: '', email: '' });
    navigate('/');
  };