在组件和页面之间切换时，不执行http请求答案

【问题标题】：When switching between component and page, the http-request is not executed在组件和页面之间切换时，不执行http请求
【发布时间】：2022-11-23 18:49:17
【问题描述】：

我正在写一个仪表板。在主页上有一个名为userInfo的组件，我通过user进行映射，显示所有用户。每个用户旁边是一个显示按钮，它导航到显示特定用户的 userDisplay 页面。当我从该页面切换回主页时，出现错误：

user.map 不是函数

这与 .map 无关。我可以用用户编写任何功能。我总是收到错误“某物不是函数”。我发现我的 redux-slice 中的 getAll 函数没有被再次调度。 redux-devtools 什么也没显示。但这只有在我从 userDisplay 切换回来时才会发生。我可以刷新主页或从另一个站点切换回来，显示用户。

我的用户信息：

const UserInfo = () => {
  const dispatch = useAppDispatch();
  const selector = useAppSelector((state:RootState)=>state.user);
  const {user, isError, isLoading, message} = selector;
  useEffect(()=>{
    if(isError){
      toast.error(message)
    }
    dispatch(getAllUser()); //this is not executed, when I switch back from userDisplay
    return ()=>{
      dispatch(reset())
    }
  }, [dispatch, isError, message])
  console.log(typeof user);
  if(isLoading){
    return <Spinner/>
  }
  return (
    <Container>
      <Title>Neue Benutzer</Title>
      <ContentWrapper>
        {user?.map((item)=>(
          <div key={item._id}>
          <Table>
            <tbody>
              <tr>
                <th>Kundename</th>
                <th>Stadt</th>
                <th>Kundendaten</th>
              </tr>
              <tr>
              <td><Name>{item.nachname}</Name></td>
              <td><Town>{item.city}</Town></td>
              <td><ShowButton><Link to={`/showUser/${item._id}`} className="link" style={{color:"var(--white)"}}>Benutzer anzeigen</Link></ShowButton></td>
              </tr>
            </tbody>
          </Table>
           </div>
        ))}

我的用户显示：

export interface UpdateData{
    userData:object,
    id:string
   }
const UserDisplay:React.FC = () => {
    const dispatch = useAppDispatch();
    const selector = useAppSelector((state:RootState)=>state.user);
    const {user, isError, isLoading, message}:any = selector;
    const {id} = useParams();

    useEffect(()=>{
        if(isError){
            toast.error(message);
        }
        dispatch(getUser(id!));
       
    }, [dispatch, isError, message, id]);
  
    const [formdata, setFormdata] = useState<{vorname:string, nachname:string, username:string, email:string, street:string, number:string,plz:string, city:string, isAdmin:string}>({
        vorname:"",
        nachname:"",
        username:"",
        email:"",
        street:"",
        number:"",
        plz:"",
        city:"",
        isAdmin:"",
    })
    console.log(user);
    console.log(typeof user);
    const {vorname, nachname, username, email, street, number, plz, city, isAdmin} = formdata;

    useEffect(()=>{
        if(user){
            setFormdata({
                vorname:user.vorname,
                nachname:user.nachname,
                username:user.username,
                email:user.email,
                street:user.street,
                number: user.number,
                plz:user.plz,
                city:user.city,
                isAdmin:user.isAdmin,
            })
        }
    }, [user])

    const onSubmit= (e:React.FormEvent)=>{
        e.preventDefault();
        const userData ={
            vorname, 
            nachname, 
            username, 
            email, 
            street, 
            number, 
            plz, 
            city, 
            isAdmin
        }
        const updateData:UpdateData = {
            userData: userData,
            id:id!,
        }
        dispatch(updateUser(updateData));
        return ()=>{
            dispatch(reset());
        }
    }

【问题讨论】：

标签： javascript reactjs typescript redux

【解决方案1】：

是的，这是对 React 的基本困惑，你应该阅读这篇文章：You might not need an effect，你就会明白。通过阅读它，您会比复制/粘贴解决方案再次犯同样的错误更好地理解。

【讨论】：