redux 我遇到打字脚本中未知类型的问题

tvokkenx  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(122)

这是我第一次使用typescript,我遇到了一个名为“state”的变量的问题,因为它被用来从api中获取我的用户列表,但我得到了这个错误“'state'是'unknown'类型”,即使它实际上工作。正如我所说,这是我第一次使用typescript,我不完全理解为什么它工作,如果它有一个错误。

//React Imports
import React, { useEffect } from "react";
//MUI Imports
import Navbar from "../../Components/Navbar";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { CardMedia } from "@mui/material";
import Typography from "@mui/material/Typography";
//Redux Imports
import { fetchAllUsers } from "../../redux/slices/users";
import { useDispatch, useSelector } from "react-redux";

function Users() {
  const { list: users } = useSelector((state) => state.users);//Error in state.users

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchAllUsers() as any);
  }, [dispatch]);

  return (
    <div className="Users">
      <Navbar></Navbar>
      <br></br>
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={2} alignItems="center" justifyContent="center">
          {users.map((user, index) => (
            <Grid item xs={3.1}>
              <Card>
                <CardMedia
                  component="img"
                  image={user.avatar}
                  alt="avatar image"
                ></CardMedia>
                <CardContent>
                  <Typography gutterBottom variant="h5">
                    {user.first_name} {user.last_name}
                  </Typography>
                  <Typography gutterBottom variant="h6">
                    {user.email}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Box>
    </div>
  );
}

export default Users;
wqlqzqxt

wqlqzqxt1#

const { list: users } = useSelector((state:SPECIFYTYPEHERE) => state.users);//Error in state.users

您需要在typescript中的冒号后面指定状态的类型,否则状态将被推断为未知。

20jt8wwn

20jt8wwn2#

您必须在此处包含state的类型定义(您可能已经在reducer部分中编写了该定义),或者可以使用条件链接state!.usersstate!.users,或者可以将any作为state (state:any)的类型

相关问题