为什么这个函数不在反应中呈现

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

我不明白你到底想要什么，我只是写了一些我希望能解决你问题的代码。虽然不是最好的解决办法，但希望能对你的问题有所帮助。

首先，我将 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;

通过this Code Sandbox link即可看到结果。

如果不是您想要的解决方案，请评论我。那么我会尝试使用其他解决方案来帮助您。

Answer 2

如前所述，此代码段无效，

    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>
}

map 工作方式不同。

考虑将其更改为，


 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>
  );
}

为什么这个函数不在反应中呈现

Why this function doesn't rendering in react

reactjs

react-native

react-redux