useEffect 清理以前的数据答案

【问题标题】：useEffect clean up previous datauseEffect 清理以前的数据
【发布时间】：2020-12-15 06:05:27
【问题描述】：

嗨伙计们！我正在使用 calendarific API 在表格中显示数据。这里的问题是，每当提交新搜索时，新数据都会呈现在旧数据旁边，并且清理工作无法进行。菜单组件：

const useStyles = makeStyles(() => ({
  root: {
    flexGrow: 1,
  },
}));

const Menu = () => {
  const classes = useStyles();
  const [hits, fetchData] = useHoliday("");
  const [holidayData, setHolidayData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setHolidayData(hits[0]);
    setLoading(true);
  }, [hits]);

  return (
    <div className={classes.root}>
      <Grid container>
        <Grid item xs={12}>
          <InputText onFormSubmit={fetchData} />
        </Grid>
        <Grid item xs={12}>
          {loading ? (
            <TableData holidayData={holidayData} />
          ) : (
            <div>Loading...</div>
          )}
        </Grid>
      </Grid>
    </div>
  );
};

export default Menu;

表格组件：

const useStyles = makeStyles({
  root: {
    width: "100%",
  },
  container: {
    maxHeight: 440,
  },
});

const columns = [
  { id: "name", label: "Name", minWidth: 170 },
  { id: "country", label: "Country", minWidth: 100 },
  { id: "description", label: "Description", minWidth: 170, align: "center" },
  { id: "type", label: "Type", align: "center", minWidth: 170 },
];

const TableData = ({ holidayData }) => {
  const classes = useStyles();

  if (!holidayData) return <></>;

  return (
    <Paper className={classes.root}>
      <TableContainer className={classes.container}>
        <Table>
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell
                  key={column.id}
                  align={column.align}
                  style={{ minWidth: column.minWidth }}
                >
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody tabIndex={-1}>
            {holidayData !== undefined &&
              holidayData.map((place) => (
                <TableRow>
                  <TableCell key={place.description}>{place.name}</TableCell>
                  <TableCell key={place.description}>
                    {place.country.name}
                  </TableCell>
                  <TableCell key={place.description}>
                    {place.description}
                  </TableCell>
                  <TableCell key={place.description} align="center">
                    {place.type}
                  </TableCell>
                </TableRow>
              ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Paper>
  );
};

export default TableData;

用于获取数据的自定义钩子：

import { useState, useEffect } from "react";
import calendarific from "../apis/calendarific";

const useHoliday = (defaultSearchTerm) => {
  const [hits, setHits] = useState([]);
  const [status, setStatus] = useState(false);

  useEffect(() => {
    fetchData(defaultSearchTerm);
    setStatus(true);
  }, [defaultSearchTerm]);

  const fetchData = async (term) => {
    const response = await calendarific.get("/holidays", {
      params: {
        country: term,
      },
    });
    let arrayHoliday = Object.values(response.data.response);
    setHits(arrayHoliday);
  };
  return [hits, fetchData];
};

export default useHoliday;

an example

首先搜索“法国”，然后搜索“墨西哥”。

谢谢

【问题讨论】：

标签： reactjs use-effect

【解决方案1】：

setHolidayData(hits[0]) 在我看来很可疑。基本上，每当 hits 发生变化时，您都会使用 hits 数组的第一个元素设置一些状态。你确定要这样做吗？

【讨论】：

你有什么建议来改进它？我做了一个console.log(hits)，它是一个数组，数据位于 hits[0] 中。
解决它！这是 Table 组件中键的问题