返回嵌套 React 元素的组件不显示

Question

我有一个默认组件 Collection，它使用名为 RenderCollectionPieces 的子组件来显示 UI 元素。我不明白为什么我能够在控制台中看到 image.name 的数据，但 却看不到 UI 元素显示 .

附加信息：

控制台没有错误
如果我将 <p>{image.name}</p> 替换为 <p>TESTING</p>，仍然没有任何显示。
columnOrg 是列表的列表
columnOrg 中的每个列表都是具有某些属性的地图列表

Index.js:

const RenderCollectionPieces = () => {
  const {collectionId} = useParams();  
  let listOfImageObjects = collectionMap[collectionId];
  let imagesPerColumn = Math.ceil(listOfImageObjects.length / 4);
  let columnOrg = [];

  while (columnOrg.length < 4){
    if(imagesPerColumn > listOfImageObjects.length){
      imagesPerColumn = listOfImageObjects.length;
    }
    columnOrg.push(listOfImageObjects.splice(0,imagesPerColumn))
  }
 
  let collectionList = columnOrg.map((col) => {
        return(            
            <Grid item sm={3}>
              {
                col.map((image) => {
                  console.log(image.name)
                  return(
                    <p>{image.name}</p>
                  )
                })
              }
            </Grid>
        )
    });
  return collectionList;
};

const Collection = ({ match }) => {
  const {collectionId} = useParams();
  return(
    <Box sx={{ background:'white'}}>
      <Grid container>           
        <RenderCollectionPieces />          
      </Grid>
  </Box>
  )
};

export default Collection;

Answer 1

我认为你误解了 React 中的状态管理。组件 re-renders 之间你想记住的每个变量都应该使用 useState 钩子包含在状态中。如果您想最初执行一些类似于 while 循环的操作，请在 useEffect 钩子中使用它。

const MyComponent = () => {
  const [myCounter, setMyCounter] = useState(0);

  useEffect(() => {
    console.log("This will be performed at the start");
  }, []);

  return (
    <Fragment>
      <button onClick={() => setMyCounter(myCounter++)} />
      You clicked {myCounter} times
    </Fragment>
  )
}

如果您不熟悉 useState 和 useEffect 钩子，我建议您先了解它们以了解 React 如何管理状态和 re-renders：https://reactjs.org/docs/hooks-intro.html

Answer 2

按照 Samuel Oleksak

的建议使用 useEffect/useState 使其正常工作

    const RenderCollectionPieces = (props) => {
    const [columnOrg, setColumnOrg] = useState([]);
    useEffect(() => {
    let columnSetup = []
    let listOfImageObjects = collectionMap[props.collectionId.collectionId];
    let imagesPerColumn = Math.ceil(listOfImageObjects.length / 4);
    
    while (columnSetup.length < 4){
      if(imagesPerColumn > listOfImageObjects.length){
        imagesPerColumn = listOfImageObjects.length;
      }
      columnSetup.push(listOfImageObjects.splice(0,imagesPerColumn))
    }
    setColumnOrg(columnSetup);
  },[]);
  
  return (
      columnOrg.map((column) => {
        return (
          <Grid item sm={3}>
            {
              column.map((image) => {
                return (<img src={image.src} alt={image.name}/>)
              })
            }
          </Grid>
        )
      })
  )
};

返回嵌套 React 元素的组件不显示

Component returning nested React Elements not displaying

javascript

reactjs

material-ui