在 useEffect 中添加 setState

Question

我有一个项目，上面有一个“登录”页面，用户点击“登录”后，应该会出现一个界面，其中包含该用户的所有列表。

为了让这些数据在登录过程后立即出现，我使用了“useEffect”并使用了与后端连接的“GetAllListsAction”操作来获取数据。

请注意，我使用的是打字稿。

然后搜索了一下，发现有好几个网站都是写这个逻辑的，在“use effect”中使用“useState”，然后使用“setList”。

就像我从网站上得到的这个例子：

 const [list, setList] = useState([]);

  useEffect(() => {
    let mounted = true;
    getList()
      .then(items => {
        if(mounted) {
          setList(items)
        }
      })
    return () => mounted = false;
  }, [])

但我使用 React 和 TypeScript，我的编码方法与网站内编码略有不同。

问题是我不知道他们为什么在 useEffect 中使用 (setList) 并且我不知道如何将它添加到我的代码中。

我的代码是：

import { Grid } from "@material-ui/core";
import SingleList from "./single-list";
import { useStyle } from "../../../../styles/list-styles";
import Header from "../../header-footer/header";
import ListModal from "../modals/list-modal";
import { useEffect } from "react";
import { bindActionCreators } from "redux";
import { Actions } from "../../../../redux-store/actions/actions";
import { connect } from "react-redux";
import { ListItem } from "../../../../redux-store/reducers/todo-list-reducer";

const Lists: React.FC<{ TodoListList: any; GetAllListsAction: Function }> = ({
  GetAllListsAction,
  TodoListList,
}) => {
  const classes = useStyle();

  useEffect(() => {
    // call action to fetch lists
    GetAllListsAction();
  }, []);

  return (
    <>
      <Header />

      <Grid className={classes.grid}>
        <Grid
          container
          className={classes.addButton}
          item
          direction="row-reverse"
        >
          <ListModal />
        </Grid>
        <Grid container item lg={12} direction="row" spacing={1}>
          {TodoListList.map((l: ListItem, index: number) => (
            <Grid key={index} item lg={3} sm={6} xs={12}>
              <SingleList title={l.title || ""} tasks={l.tasks} />
            </Grid>
          ))}
        </Grid>
      </Grid>
    </>
  );
};

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      ...Actions,
    },
    dispatch
  );
}

function mapStateToProps(state: any) {
  console.log("state inside lists component, bottom:", state);
  console.log("TodoListList, bottom:", state.todoList?.List);

  return {
    TodoListList: state.todoList?.state || [],
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(Lists);

Answer 1

在你的例子中，获取数据的函数和数据列表是传入的props.So你不需要使用useState。

如果在 Lists 组件中进行 api 调用，您应该使用 useState。

在 useEffect 中添加 setState

add setState inside useEffect

typescript

reactjs

redux