reactjs - useHistory() react 钩子(Hook)似乎没有触发重新渲染

Question

我正在制作一个类似于应用程序的 CRUD 博客，当我发布或编辑博客时，我使用 history.push() 重定向用户，但是当用户被重定向时，如果我刷新页面，信息仍然是旧的，内容被更新.在过去的一天里，我到处都在寻找，但我似乎找不到问题的答案。例如，这是我更新信息的组件

import { useState, useEffect, useRef } from "react";
import { useParams, useHistory } from "react-router";

const EditBanner = (props) => {


 const [imgValue, setImgValue] = useState('');
 const [descriptionValue, setDescriptionValue] = useState('');


 const params = useParams();
 const history = useHistory();

 const imgRef = useRef();
 const descriptionRef = useRef();

  useEffect(() => {
      const fetchBlog = async () => {
          const response = await fetch(`URL/banners/${params.id}.json`);
          const data = await response.json();
          setImgValue(data.img);
          setDescriptionValue(data.description);

      }

      fetchBlog();
  },[params])

    const onSubmitHandler = (e) => {

        e.preventDefault()

        fetch(`URL/banners/${params.id}.json`,{
            method: "PUT",
            body: JSON.stringify({
                description: descriptionRef.current.value,
                img: imgRef.current.value
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })

        history.push(`/banners/${params.id}`);
    }

    const imgUrlChangeHandler = () => {
        setImgValue(imgRef.current.value)
    }
    const descriptionChangeHandler = () => {
        setDescriptionValue(descriptionRef.current.value)
    }




    return (
        <form onSubmit={onSubmitHandler}>
            <input type="text" placeholder="img url" ref={imgRef} value={imgValue} onChange={imgUrlChangeHandler}></input>
            <textarea ref={descriptionRef} value={descriptionValue} onChange={descriptionChangeHandler}></textarea>
            <button>Submit</button>
        </form>
    )
}

export default EditBanner;

这是我使用 useHistory() Hook 重定向到的详细信息页面。请记住，如果我将 bannerDetail 作为依赖项添加到 useEffect Hook 中，它会起作用，但随后我将创建一个无限循环，

import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { useHistory } from 'react-router';

import styles from './BannerDetail.module.css';

const BannerDetail = (props) => {
    const history = useHistory();
    const params = useParams();
    const [bannerDetail, setBannerDetail] = useState({});

    useEffect(() => {
        const fetchBanner = async () => {
            const response = await fetch(`URL/banners/${params.id}.json`);
            const data = await response.json();
            console.log(data)
            setBannerDetail(data);
        }
        console.log('useEffect run in bannerDetail')
        fetchBanner();
    },[params])


    const onEditHandler = (e) => {
        e.preventDefault();
        history.push(`/banners/${params.id}/edit`)
    }
    const onDeleteHandler = (e) => {
        e.preventDefault();
        fetch(`URL/banners/${params.id}.json`,{
            method: "DELETE",
            headers: {
                'Content-Type': 'application/json'
              }
        })

        history.replace('/banners')
    }



    return (
        <section className={styles.detail}>
            <div className={styles['image-container']}>
                <img
                    src={bannerDetail.img}
                    alt={bannerDetail.description}
                />
            </div>
            <div className={styles['description-container']}>
                <p>{bannerDetail.description}</p>
            </div>
            <div className={styles.actions}> 
                <button onClick={onEditHandler}>Edit</button>
                <button onClick={onDeleteHandler}>Delete</button>
            </div>

        </section>
    )
}


export default BannerDetail;

这里还有我所有的路线，

<Switch>
  <Route path="/" exact><Redirect to="/banners"/></Route>

  <Route path="/banners" exact> <Banners/> </Route>

  <Route path="/new-banner" exact>
    <AddNewUser/>
  </Route>

  <Route path="/banners/:id/edit" exact>
    <EditBanner/>
  </Route>

  <Route path="/banners/:id" >
    <BannerDetail/>
  </Route>
</Switch>

Answer 1

我认为您遇到的问题是您正在分派(dispatch) PUT 请求，然后立即导航到新页面，在该页面上组件安装时发出 GET 请求。无法保证网络请求的解析顺序。

在导航到下一页之前，您可能希望先等待 PUT 请求解决。

const onSubmitHandler = (e) => {
  e.preventDefault();

  fetch(`URL/banners/${params.id}.json`,{
    method: "PUT",
    body: JSON.stringify({
      description: descriptionRef.current.value,
      img: imgRef.current.value
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  }).finally(() => {
    // regardless of fetch resolve/reject, navigate to new page
    history.push(`/banners/${params.id}`);
  });
}

也许在这里你可能只想在 fetch 解析时导航到下一页，或者只有 200OK 响应或者你有什么，使用 .then为此阻止。也许您想处理被拒绝的响应以向用户显示错误消息，为此使用 .catch block 。

const onSubmitHandler = (e) => {
  e.preventDefault();

  fetch(`URL/banners/${params.id}.json`,{
    method: "PUT",
    body: JSON.stringify({
      description: descriptionRef.current.value,
      img: imgRef.current.value
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then((response) => {
      if (response.ok) throw new Error('response not ok');
      history.push(`/banners/${params.id}`);
    })
    .catch(error => {
      // handle errors
    });
}

如果你更喜欢 async/await 而不是 Promise 链:

const onSubmitHandler = async (e) => {
  e.preventDefault();

  try {
    const response = await fetch(`URL/banners/${params.id}.json`,{
      method: "PUT",
      body: JSON.stringify({
        description: descriptionRef.current.value,
        img: imgRef.current.value
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (response.ok) throw new Error('response not ok');
    history.push(`/banners/${params.id}`);
  } catch(error) {
    // handle errors
  }
}