这是我第一次使用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;
2条答案
按热度按时间wqlqzqxt1#
您需要在typescript中的冒号后面指定状态的类型,否则状态将被推断为未知。
20jt8wwn2#
您必须在此处包含state的类型定义(您可能已经在reducer部分中编写了该定义),或者可以使用条件链接
state!.users
或state!.users
,或者可以将any作为state(state:any)
的类型