数据更新后 React Material UI Grid Item 不渲染答案

【问题标题】：React Material UI Grid Item doesn`t render after data update数据更新后 React Material UI Grid Item 不渲染
【发布时间】：2021-06-06 11:19:38
【问题描述】：

当props.data 从顶部组件更改时，我无法使以下代码呈现网格项。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import ProductCard from './ProductCard';

const useStyles = makeStyles((theme) => ({
  grid: {
    padding: "8px",
  },
}));

export default function CenteredGrid(props) {
  const classes = useStyles();
  const visibleProductData = props.data === null ? {} : props.data;
  return (
    <Grid container >
      {console.log("This is from the product card grid")}
      {console.log(visibleProductData)}
      {Object.entries(visibleProductData).map(productData => (
        <Grid key={productData[0]} className={classes.grid} item md={3} sm={6} xs={12}>
          <ProductCard data={productData[1]}/>
        </Grid>
      ))}
    </Grid>
  );
}

当我运行它时，在数据更新后，控制台会记录visibleProductData，这是一个由三个产品组成的字典，正如预期的那样。但是这些产品是不可见的，事实上，当我检查时，我没有看到 Grid 容器的子项。奇怪的是，即使对代码进行了微小的更改，当发生快速刷新时，产品也会变得可见。这里可能有什么问题？

PS：我正在使用 nextjs 和 material ui。

编辑/更新 - 父组件

  const classes = useStyles();
  const { buyer, categoryData, filterData, visibleProductData } = useContext(BuyerContext);

  if (!buyer) {
    return (
    <AuthRequired/>
  )} else {
    return (
      <>
        <HeaderBar/>
        <Grid className={classes.breadcrumb} container>
          <Breadcrumb />
        </Grid>
        <Divider variant="middle" />
        <main className={classes.main}>
          <Grid container>
            <Grid item xs={2}>
              <Box display={{ xs: 'none', sm: 'block' }}>
                <CategoryList data={categoryData}/>
              </Box>
            </Grid>
            <Grid item sm={10} xs={12}>
              <FilterGrid data={filterData}/>
              <ProductCardGrid data={visibleProductData}/>
            </Grid>
          </Grid>
        </main>
        <Footer/>
      </>
    )
  }
}

【问题讨论】：

标签： reactjs material-ui next.js

【解决方案1】：

试试下面这行，

const visibleProductData = props.data === null ? {} : {...props.data};

这可能是因为您的visibleProductData 变量总是获取相同的引用对象。每次props.data 更改时，您都需要创建一个新的引用对象。如果问题仍然存在，那么我们需要查看您的父组件。问题可能就在那里。

【讨论】：

刚试过这个，还是一样的行为，我已经发布了对包括父组件在内的问题的编辑。

【解决方案2】：

在 React 功能组件体中写 const visibleProductData = props.data === null ? {} : props.data; 不是正确的“React 方式”。你应该：

定义一个局部状态变量，例如，visibleProductData:

const [visibleProductData, setVisibleProductData] = useState({});

使用useEffect 挂钩“监听”来自父对象的新值。比如：

useEffect(() => {
   setVisibleProductData(props.data === null ? {} : {...props.data});
}, [props.data]);

这样，每次props.data发生变化，useEffect都会被触发，并更新本地的visibleProductData。

【讨论】：

谢谢，也试过了，但还是不行。这次在初始加载时，组件渲染了两次，我猜是因为使用效果，但是在两次渲染时它都返回空。
当我将{...props.data} 更改为props.data 时，在第二次渲染时，useEffect 再次获得了数据，但网格项没有渲染。
如果你在你的渲染中加入{props.data && <Grid container >...</Grid>}之类的东西呢？
如果你的意思是，有条件地渲染，当 visibleProductData 为 null 或空时只返回 null，当有数据时，渲染网格容器和项目，是的，我确实尝试过，但它不工作要么。

【解决方案3】：

我终于可以解决问题了，这是一个小错字，没有错误，因此很难调试。而不是像这样在地图中放置另一个“（”，{array.map(element => (...))} 我应该像这样{array.map(element => ...)} 那样没有它。

【讨论】：