当数组的函数与onclick属性中的另一个函数一起调用时，该数组将被清除

Question

我有两个父div，每个父div都有5个子div, onClick在其中一个子div上调用一个函数来改变类名，onDoubleClick在子div上调用一个函数来从数组中弹出最后一个元素并推送一个特定的值。

则对两个数组的值执行一个条件。问题是第一个数组总是发送空的条件，但在我删除onClick函数的部分，数组被正确发送到条件。

有什么问题

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组件将在每次重新渲染时执行组件(函数)本身。

在你的情况下，你的array1和array2不是一个状态，每次组件重新渲染，你的数组将是[]，因为你声明它。

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

将其封装为:

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

Answer 2

我通过使用useState解决了这个问题，感谢所有帮助我的人。

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