Giter VIP home page Giter VIP logo

Comments (3)

SolomonGrundy-97 avatar SolomonGrundy-97 commented on May 1, 2024 4

Definitely

from react.

pwbriggs avatar pwbriggs commented on May 1, 2024 1

Hey there @Fun117 πŸ‘‹

Thanks for opening this issue! To help us fix the problem you're experiencing, could you please do two things for me:

  1. Create a minimal, reproducible example demonstrating this bug. I'd start by removing irrelevant parts of the app one at a time, checking that the error still exists. Read the article I just linked to for more information.
  2. Send a link to a new sandbox with this minimal, reproducible example.

Thanks! ❀️

from react.

Fun117 avatar Fun117 commented on May 1, 2024 1

Hi @pwbriggs πŸ‘‹

Thank you for your prompt response!

I've managed to resolve the error by making some changes to the code as suggested. Here's what I did:

Code Changes:

CommentsHTML Function Parameters: Changed the parameters of the CommentsHTML function to accept an object instead of individual arguments. This enhances readability and maintainability.

Old Code:

export function CommentsHTML(CommentsData: Comments[], username: string, userId: string, userImage: string): JSX.Element[] {

New Code:

export function CommentsHTML({ CommentsData, username, userId, userImage }: { CommentsData: Comments[], username: string, userId: string, userImage: string }): JSX.Element[] {

Refactored CommentsHtmlContents Function: Simplified the CommentsHtmlContents function by extracting the rendering logic into a nested Group component. This improves code readability and organization.

Old Code:

export function CommentsHtmlContents({ commentsRes, comments, userData }: { commentsRes: boolean, comments: any, userData: any }) {

    // Omitted

    // CommentsHTML γ‚’δΈ€ζ™‚ηš„γ«δΏε­˜
    let commentsContent = null;
    if (commentsRes) {
        if (comments.length > 0) {
            commentsContent = CommentsHTML(comments, username, userId, userImage);
        } else {
            commentsContent = (
                <li className='animated-slideIn-up p-2 animate-fade-up animate-once animate-duration-500 animate-delay-0 animate-ease-in-out animate-normal animate-fill-forwards'>
                    // Omitted
                </li>
            );
        }
    } else {
        commentsContent = (
            <li className="relative flex flex-col md:flex-row flex-wrap items-center justify-end w-full">
                // Omitted
            </li>
        );
    }

    return (
        <>
            <section className="md:p-6 pt-0">
                // Omitted
            </section>
        </>
    )
}

New Code:

export function CommentsHtmlContents({ commentsRes, comments, userData }: { commentsRes: boolean, comments: any, userData: any }) {

   // Omitted

    function Group({ children }: { children: React.ReactNode }) {
        return (
            <section className="md:p-6 pt-0">
                <ul className="flex flex-col justify-center items-center gap-1 w-full mt-10 *:flex *:flex-row *:flex-wrap *:justify-end *:items-center *:w-full *:p-1">
                    {children}
                </ul>
            </section>
        )
    }

    // CommentsHTML γ‚’δΈ€ζ™‚ηš„γ«δΏε­˜
    let commentsContent = null;
    if (commentsRes) {
        if (comments.length > 0) {
            return (
                <Group>
                    <CommentsHTML CommentsData={comments} username={username} userId={userId} userImage={userImage}/>
                </Group>
            )
        } else {
            <Group>
                // Omitted
            </Group>
        }
    } else {
        <Group>
            // Omitted
        </Group>
    }
}

Updated Code Sandbox:

I've updated the code in the provided CodeSandbox to reflect these changes. You can view the updated code here.

Note

While I was able to resolve the issue when reducing the code to a minimal reproduction, the specific reason for the error remains unclear.

Thank you for your assistance! ❀️

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.