redux 在组件和页面之间切换时,不执行http-request

lg40wkob  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(108)

我正在编写一个 Jmeter 板。主页上有一个名为userInfo的组件,我在其中Mapuser并显示所有用户。每个用户旁边都有一个显示按钮,用于导航到userDisplay页,在该页中显示特定用户。当我从该页切换回主页时,出现错误:
user.map 不是函数
这和. map没有关系。我可以用user写任何函数。我总是得到错误“something is not a function”。我发现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());
        }
    }
iibxawm4

iibxawm41#

是的,这是一个关于React的基本困惑,你应该阅读这篇文章:你可能不需要效果,你会理解的。你会更好地理解阅读它比复制/粘贴的解决方案,使同样的错误再次。

相关问题