У меня есть компонент по умолчанию Коллекция, который использует подкомпонент с именем РендерКоллекцияПьесес для отображения элементов пользовательского интерфейса. Я не могу понять, почему я могу видеть данные для image.name
в консоли, кроме не может видеть отображение элементов пользовательского интерфейса.
Дополнительная информация:
<p>{image.name}</p>
на <p>TESTING</p>
, все равно ничего не появится.Индекс.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.info(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;
Я думаю, вы неправильно понимаете управление состоянием в React. Каждая переменная, которую вы хотите запомнить между повторными рендерингами компонентов, должна быть включена в состояние с помощью хука useState
. Если вы хотите изначально выполнить что-то вроде цикла while, используйте его внутри хука useEffect
.
const MyComponent = () => {
const [myCounter, setMyCounter] = useState(0);
useEffect(() => {
console.info("This will be performed at the start");
}, []);
return (
<Fragment>
<button onClick = {() => setMyCounter(myCounter++)} />
You clicked {myCounter} times
</Fragment>
)
}
Если вы не знакомы с хуками useState
и useEffect
, я рекомендую сначала узнать о них, чтобы понять, как React управляет состоянием и выполняет повторный рендеринг: https://reactjs.org/docs/hooks-intro.html
Можете ли вы ответить ответом, который работает с использованием useEffect?
Получил работу, используя 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>
)
})
)
};
Эти хуки действительно нужны? Все, что я хочу, чтобы компонент делал, это перебирал пару списков и возвращал элементы в содержимом элементов пользовательского интерфейса. Похоже, хуки были бы более полезны, если вы ожидаете, что пользователь будет взаимодействовать с пользовательским интерфейсом. Я просто хочу загрузить элементы и их относительные атрибуты на экране.