当使用 onclick 属性中的另一个函数调用其函数时，数组被清除

Question

I have two parent divs each of them has 5 child divs, onClick on one of the child divs a function that changes the class name is called and onDoubleClick on the child div a function is called to pop the last element from an array and push a certain value.

then a condition is executed on the values of the two array. the problem is the first array always sent empty to the condition but in case of I deleted the part on the onClick function, the array is sent correctly to the condition.

what could be the problem.

import React, { Component, useEffect, useState } from "react";

const Survey = () => {

    const array1 = [];
    const array2 = [];

const [classA, setClassA] = useState();
    const handleClassA = (id) => {
        setClassA(id);

    }

    const handleArray1 = (id) => {
        array1.pop();
        array1.push(id);
        console.log('array1', array1);

    }
    const [classB, setClassB] = useState();
    const handleClassB = (id) => {
        setClassB(id);

    }
    const handleArray2 = (id) => {
        array2.pop();
        array2.push(id);

        console.log('array2', array2);

    }

const Quiz = () => {
        if (array1.includes(0) || array1.includes(1) || array1.includes(2)) {
            console.log('one is 0,1,2');
            if (array2.includes(0) || array2.includes(1) || array2.includes(2)) {
                console.log('two is 0,1,2');
            } else if (array2.includes(3) || array2.includes(4)) {
                console.log('counseling');
                setResult("Counseling2");
            }
        } else if (array1.includes(3) || array1.includes(4)) {
            console.log('one is 3,4');
            if (array2.includes(0) || array2.includes(1) || array2.includes(2)) {
                console.log('two is 0, 1,2');
                }
            } else if (array2.includes(3) || array2.includes(4)) {
                console.log('two is 3,4');
                console.log('therapy');
                setResult("Therapy")
            }
        }
        console.log('quiz done');
        console.log(array1);
        console.log(array2);
    }

return(
  <div className="survey_questions">

                        <div className="survey_q_1">
                            <p id="q_1">I’m concerned about a behavior, feeling, or something I’m doing.</p>
                            <div className="survey_a_1">
                                <div
                                    className={classA === 0 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassA(0);

                                    }}
                                    onDoubleClick={() => { handleArray1(0) }}
                                >
                                    not at all
                                </div>
                                <div
                                    className={classA === 1 ? "survey_a_active" : "survey_a"}

                                    id="a_1"
                                    onClick={() => {
                                        handleClassA(1);

                                    }}
                                    onDoubleClick={() => { handleArray1(1) }}
                                >
                                    just a little
                                </div>
                                <div
                                    className={classA === 2 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassA(2);
                                    }}
                                    onDoubleClick={() => { handleArray1(2) }}
                                >
                                    moderately
                                </div>
                                <div
                                    className={classA === 3 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassA(3);

                                    }}
                                    onDoubleClick={() => { handleArray1(3) }}
                                >
                                    quite a lot
                                </div>
                                <div
                                    className={classA === 4 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassA(4);
                                    }}
                                    onDoubleClick={() => { handleArray1(4) }}
                                >
                                    very much
                                </div>
                            </div>
                        </div >
                        <div className="survey_q_1">
                            <p id="q_1">This behavior or feeling has been getting worse in the past few weeks.</p>
                            <div className="survey_a_1">
                                <div
                                    className={classB === 5 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassB(5);

                                    }}
                                    onDoubleClick={() => { handleArray2(0) }}>
                                    not at all
                                </div>
                                <div
                                    className={classB === 6 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassB(6);

                                    }}
                                    onDoubleClick={() => { handleArray2(1) }}>
                                    just a little
                                </div>
                                <div
                                    className={classB === 7 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassB(7);

                                    }}
                                    onDoubleClick={() => { handleArray2(2) }}>
                                    moderately
                                </div>
                                <div
                                    className={classB === 8 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassB(8);

                                    }}
                                    onDoubleClick={() => { handleArray2(3) }}>
                                    quite a lot
                                </div>
                                <div
                                    className={classB === 9 ? "survey_a_active" : "survey_a"}
                                    id="a_1"
                                    onClick={() => {
                                        handleClassB(9);

                                    }}
                                    onDoubleClick={() => { handleArray2(4) }}>
                                    very much
                                </div>
                            </div>
                        </div >
</div>

)

}

export default Survey;

Answer 1

React Functional component will execute the component(function) itself every time it re-render.

In your case, your array1 and array 2 are not a state, every time component re-render, your array will be [ ] as you declare it.

const array1 = [];
const array2 = [];

wrap it into state as:

const [array1, setArray1] = useState([]);
const [array2, setArray2] = useState([]);

Answer 2

I solved the problem by using useState, thanks to all who helped me.

const [array1, setArray1] = useState([]);
const [array2, setArray2] = useState([]);