为什么这个函数没有在反应中渲染

Question

首先，感谢您像这里一样输入

我希望能够像这段代码一样使用，这段代码在react组件中呈现，但第二段代码不起作用。。

这就是我说的，先生。

function forFourMultiplyFour(_pictures) {
if (_pictures.length === 0) {
return '';
}
return <div
style={{ display: 'flex', justifyContent: 'center' }}>{_pictures.map((el) => {
return <div style={{ margin: '5px' }}>
<Img key={el.id} src={el.src} alt="picture"></Img>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>{el.title}</div>
<div>생성일자</div>
</div>
</div>;
})}</div>;
}

function makeHowManyPage(count) {
// 태그안에 함수로 또 다른 태그를 감싼다음에 forFourMultiplyFour로 한 것처럼 렌더링할 것을 return 했는데
// 안되서 state을 배열로 만들어서

return <div
className="makeHowManyPage"
style={{ display: 'flex', justifyContent: 'center' }}>
{() => {
for (let i = 1; i <= count; i++) {
return <div>{i}</div>
}
}}
</div>
}

然后我会像这个一样渲染

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import dummyPictures from '../../../dummyDate';
function Gallery() {
const [forRenderingOne, setForRenderingOne] = useState(<div></div>);
const [forRenderingTwo, setForRenderingTwo] = useState(<div></div>);
const [forRenderingThree, setForRenderingThree] = useState(<div></div>);
const [forRenderingFour, setForRenderingFour] = useState(<div></div>);
const [pageCount, setPageCount] = useState(<div>1</div>);
const [_temp, set_Temp] = useState(['안녕하세요', '안녕하세요', '안녕하세요', '안녕하세요'])
// 애초에 4개씩 받아서 뿌릴 것
function forFourMultiplyFour(_pictures) {
if (_pictures.length === 0) {
return '';
}
return <div
style={{ display: 'flex', justifyContent: 'center' }}>{_pictures.map((el) => {
return <div style={{ margin: '5px' }}>
<Img key={el.id} src={el.src} alt="picture"></Img>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>{el.title}</div>
<div>생성일자</div>
</div>
</div>;
})}</div>;
}
function makeHowManyPage(count) {
// 태그안에 함수로 또 다른 태그를 감싼다음에 forFourMultiplyFour로 한 것처럼 렌더링할 것을 return 했는데
// 안되서 state을 배열로 만들어서

return <div
className="makeHowManyPage"
style={{ display: 'flex', justifyContent: 'center' }}>
{() => {
for (let i = 1; i <= count; i++) {
return <div>{i}</div>
}
}}
</div>
}
useEffect(() => {
// 서버에서 줄때 무조건 객체 16개가 든 배열이 응답해와야 정상작동되는 코드다..
setPageCount(makeHowManyPage(5))
setForRenderingOne(forFourMultiplyFour(dummyPictures.pictures.slice(0, 4)));
setForRenderingTwo(forFourMultiplyFour(dummyPictures.pictures.slice(4, 8)));
setForRenderingThree(forFourMultiplyFour(dummyPictures.pictures.slice(8, 12)));
setForRenderingFour(forFourMultiplyFour(dummyPictures.pictures.slice(12)));
}, []);
return (
<div>
{/* {forRenderingOne}
{forRenderingTwo}
{forRenderingThree}
{forRenderingFour} */}

{()=>{ return <div>'안녕하세요'</div>}}
</div>
)
}
export default Gallery
const Img = styled.img`
width: 15vw;
height: 20vh;
`

Answer 1

如前所述，此代码片段不起作用，

function makeHowManyPage(count) {
// 태그안에 함수로 또 다른 태그를 감싼다음에 forFourMultiplyFour로 한 것처럼 렌더링할 것을 return 했는데
// 안되서 state을 배열로 만들어서

return <div
className="makeHowManyPage"
style={{ display: 'flex', justifyContent: 'center' }}>
{() => {
for (let i = 1; i <= count; i++) {
return <div>{i}</div>
}
}}
</div>
}

看看这个返回div而不是array的片段，

for (let i = 1; i <= count; i++) {
return <div>{i}</div>
}

CCD_ 3的工作方式不同。

考虑将其更改为

function makeHowManyPage(count) {
// 태그안에 함수로 또 다른 태그를 감싼다음에 forFourMultiplyFour로 한 것처럼 렌더링할 것을 return 했는데
// 안되서 state을 배열로 만들어서
let array = [];
for (let i = 1; i <= count; i++) {
array.push(<div key={i}>{i}</div>);
}
return (
<div
className="makeHowManyPage"
style={{ display: "flex", justifyContent: "center" }}
>
{array}
</div>
);
}

然后使用，

export default function App() {

// declaration
let elements = makeHowManyPage(5);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{elements}
</div>
);
}

Answer 2

我不明白你到底想要什么，我只是写了一些代码来解决你的问题。我希望它能帮助你的问题，尽管它不是最好的解决方案。

首先，我将Gallery组件分为两个组件，包括forFourMultiplyFour函数。

(我没有伪图片，所以我使用了图片列表api。(

其次，作为窗台的注释，为useState初始值写一个简单的值。我认为您只需要两个值，页面和图像数组。通常人们得到的图像列表改变页面和偏移值不切片图像数组。(如果我有错误的想法，请告诉我。(所以我只是在点击按钮时更改页面状态。

对于4*4图像排列，我使用了flex属性。

import React, { useState, useEffect } from "react";
import axios from "axios";
import ForFourMultiplyFour from "./ForFourMultiplyFour";
function Gallery() {
const [page, setPage] = useState(1);
const [images, setImages] = useState([]);
const URL = "https://picsum.photos/v2/list";
const LIMIT = 16;
useEffect(() => {
async function fetchImages() {
const { data } = await axios.get(`${URL}?page=${page}&limit=${LIMIT}`);
setImages(data);
}
fetchImages();
}, [images, page]);
useEffect(() => {
setPage(page)
}, [page])
return <ForFourMultiplyFour images={images} page={page} setPage={setPage} />;
}
export default Gallery;

import styled from "styled-components";
function ForFourMultiplyFour({ images, setPage, page }) {
const handlePage = (param) => {
if (param === "plus") {
setPage(page + 1);
} else {
if (page === 1) return;
setPage(page - 1);
}
};
if (images.length < 1) return <></>;
return (
<>
<ButtonWrapper>
<Button onClick={() => handlePage("minus")}>prev</Button>
<Button onClick={() => handlePage("plus")}>next</Button>
</ButtonWrapper>
<div
style={{
display: "flex",
justifyContent: "center",
flexWrap: "wrap"
}}
>
{images.map((el) => {
return (
<div style={{ margin: "5px", flex: "1 1 20%" }} key={el.id}>
<Img key={el.id} src={el.download_url} alt="picture"></Img>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div>생성일자</div>
</div>
</div>
);
})}
</div>
</>
);
}
const Img = styled.img`
width: 15vw;
height: 20vh;
`;
const ButtonWrapper = styled.div`
display: flex;
`;
const Button = styled.button`
cursor: pointer;
`;
export default ForFourMultiplyFour;

您可以通过此代码沙盒链接查看结果。

如果这不是你想要的解决方案，请评论我。然后我会尝试帮助你使用另一个解决方案。