在 useEffect 中添加 setState答案

【问题标题】：add setState inside useEffect在 useEffect 中添加 setState
【发布时间】：2021-12-30 12:11:30
【问题描述】：

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

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

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

然后搜索了一下，发现有几个网站写了这个逻辑，他们使用“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);

【问题讨论】：

在您发布的示例代码中，他们在 useEffect 中调用 getList 以在页面呈现后立即获取列表，然后使用 setList 更新列表的状态。

标签： reactjs typescript redux

【解决方案1】：

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

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

【讨论】：