为啥这个函数没有在反应中呈现

Posted 2023-02-16

【中文标题】为啥这个函数没有在反应中呈现

【英文标题】：Why this function doesn't rendering in react为什么这个函数没有在反应中呈现

【发布时间】：2022-01-16 16:13:06

【问题描述】：

首先，感谢您在这里输入

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

先生，我就是这么说的。

    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 ></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 ></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;
`

【问题讨论】：

组件不是合适的状态值。状态应该是需要保存的最简单的可能值，以便您的组件可以呈现。组件有责任声明 UI 应该是什么，而不是状态。

【参考方案1】：

如上所述，这段代码 sn-p 不起作用，

    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的sn-p，

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

【讨论】：

感谢您为我解答！我不能用英语，我很感激

【参考方案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 ></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查看结果。

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

【讨论】：

感谢您为我解答！我不能用英语，但我很感激我很伤心我能选择的答案是一个非常感谢！