组件未在 React useState 中更新答案

【问题标题】：The component is not updating in React useState组件未在 React useState 中更新
【发布时间】：2020-12-29 18:40:27
【问题描述】：

const movieList = getMovies();

const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
});

const Movie = () => {
  const classes = useStyles();
  const [movies, setMovies] = useState("");

  useEffect(() => {
    setMovies(movieList);
  }, []);

  const handleDelete = (movie) => {
    deleteMovie(movie._id);
    setMovies(movies);
  };

  console.log(movies);

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>
              <strong>Title</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Genre</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Stock</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Rate</strong>
            </TableCell>
            <TableCell align="right"></TableCell>
          </TableRow>
        </TableHead>

        {typeof movies === "object"
          ? movies.map((row) => (
              <TableBody key={row._id}>
                <TableRow>
                  <TableCell component="th" scope="row">
                    {row.title}
                  </TableCell>
                  <TableCell align="right">{row.genre.name}</TableCell>
                  <TableCell align="right">{row.numberInStock}</TableCell>
                  <TableCell align="right">{row.dailyRentalRate}</TableCell>
                  <TableCell align="right">
                    <Button
                      variant="contained"
                      color="secondary"
                      onClick={() => handleDelete(row)}
                    >
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            ))
          : null}
      </Table>
    </TableContainer>
  );
};

export default Movie;

问题该组件没有重新渲染，它只是在控制台上更新。说明

基本上，我使用材质 ui 和反应，我已经显示了电影的内容，但是当我点击删除按钮，它在控制台上更新但不在 UI 上意味着前面结束浏览器

【问题讨论】：

标签： reactjs

【解决方案1】：

你不应该改变你的状态。但是删除你是。

React 不会重新渲染，如果之前的状态和当前的状态大致相同（AKA 相同的对象实例）。您需要生成一个没有要删除的电影的新数组。

为此，您可以使用 setMovies 的回调和数组的过滤功能：

const handleDelete = (movie) => {
    setMovies(currentMovies => currentMovies.filter(m => m._id !== movie._id));
  };

这会将电影设置为一个新数组（过滤器生成一个新数组）并删除选定的电影，因为如果 id 匹配，它将返回 false 并且不会包含在返回的数组中。

您也不需要 useEffect，只需这样做：

const [movies, setMovies] = useState(movieList);

因为这只会在初始渲染时生效，而 useEffect 的作用完全相同。

【讨论】：