Javascript 如何在nextjs getStaticprops或getServerSideProps中使用dispatch

我对Next js不熟悉，我想在

useffect

中调用新闻api，并将新闻数组发送到我的商店。然后根据用户在标题搜索栏中的输入对其进行过滤。问题是，一旦使用效果数据提取完成，用户开始键入而不是过滤新闻数组，屏幕将重新呈现，数据提取将再次开始。如何防止这种重新渲染并保存新闻数组

我试图使用

getStaticprops

，但其中不允许使用Dispatch

index.js

import { fetchNews } from "../store/actions/newsActions";
import NewsInfo from "../components/NewsInfo";
import { useDispatch, useSelector } from "react-redux";
import CircularProgress from "@material-ui/core/CircularProgress";

export default function Home() {
  const dispatch = useDispatch();
  const { news } = useSelector((state) => state.news);

  React.useEffect(() => {
    dispatch(fetchNews());
  }, []);
  return (
    <>
      {/* this wrapper cmp will make each headline uniquely accessible  */}
      {news?.articles ? (
        news.articles.map((article) => (
          <React.Fragment key={article.publishedAt}>
            <NewsInfo headlines={article} />
          </React.Fragment>
        ))
      ) : (
        <CircularProgress />
      )}
    </>
  );
}

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import InputBase from "@material-ui/core/InputBase";
import { fade, makeStyles } from "@material-ui/core/styles";
import MenuIcon from "@material-ui/icons/Menu";
import SearchIcon from "@material-ui/icons/Search";
import { useDispatch } from "react-redux";
import { filterHeadlines } from "../store/actions/newsActions";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
    display: "none",
    [theme.breakpoints.up("sm")]: {
      display: "block",
    },
  },
  search: {
    position: "relative",
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    "&:hover": {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
    marginLeft: 0,
    width: "100%",
    [theme.breakpoints.up("sm")]: {
      marginLeft: theme.spacing(1),
      width: "auto",
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: "100%",
    position: "absolute",
    pointerEvents: "none",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  inputRoot: {
    color: "inherit",
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    transition: theme.transitions.create("width"),
    width: "100%",
    [theme.breakpoints.up("sm")]: {
      width: "12ch",
      "&:focus": {
        width: "20ch",
      },
    },
  },
}));

function SearchAppBar() {
  const classes = useStyles();
  const dispatch = useDispatch();
  const [input, setInput] = React.useState("");

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="open drawer"
          >
            <MenuIcon />
          </IconButton>
          <Typography className={classes.title} variant="h6" noWrap>
            Material-UI
          </Typography>
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ "aria-label": "search" }}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onBlur={() => dispatch(filterHeadlines(input))}
            />
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}
export default SearchAppBar;

---

你能分享标题/搜索栏的实现吗？@Hangindev我添加了标题这很尴尬我在过滤整个数组而不是查找元素你能分享标题/搜索栏的实现吗？@Hangindev我添加了标题这很尴尬我在过滤整个数组而不是查找元素