我有一个包含24个问题的数组"questions",但数组中的最后一个问题没有显示出来,也没有计入最终得分,我不明白为什么它只渲染了23次。
我想知道这是否与索引有关,但我不能完全告诉出了什么问题以及如何修复它。
这是我目前拥有的代码:
const questions = [
"...halten wir uns streng an formelle Benimmvorschriften.",
"...ist es wichtig, mit unserem Handeln Gewinn zu erwirtschaften.",
"...erwarten wir, dass andere mehr Einfluss haben wollen.",
"...streben wir nach einer perfekten Lösung.",
"...ist das Wohlbefinden anderer ein gutes Argument.",
"...werden ausgefallene Ideen gefördert.",
"...erwarten wir voneinander, dass wir die internen Weisungen strikt einhalten.",
"...hat alles seinen (monetären) Preis.",
"...gilt Einfluss als wichtige Eigenschaft.",
"...ist wichtig, dass Dinge ihre Funktion erfüllen.",
"...erwarten wir, dass sich Vorgesetzte auch um die persönlichen Anliegen der Mitarbeitenden kümmern.",
"...ist «out of the box» ein gutes Argument.",
"...halten wir uns an Vorschriften, die bestimmen, welches Verhalten zulässig/erlaubt ist.",
"...sind Anreize wirksam, wenn sie mit Geldzahlungen verbunden sind.",
"...bemühen wir uns um einflussreiche Leute.",
"...muss etwas, das nicht funktioniert, repariert werden.",
"...gehen wir auf individuelle Lebenssituationen der Mitarbeitenden ein.",
"...ist es erwünscht, neue Dinge auszuprobieren.",
"...ist eine vorgegebene Regel ein gutes Argument.",
"...werden Handlungen als richtig erachtet, wenn sie einen Gewinn versprechen.",
"...gelten Kolleg*innen mit grosser Macht als erfolgreich.",
"...entwickeln wir Lösungen so, dass sie ihren Zweck erfüllen.",
"...achten wir darauf, ob es anderen gut geht.",
"...ist es ein Kompliment, originell zu sein. ",
];
const Survey = () => {
// Array of options
const options = [
{ value: 1, text: "Trifft nicht zu", score: 0.25 },
{ value: 2, text: "Trifft eher nicht zu", score: 0.5 },
{ value: 3, text: "Trifft nicht zu", score: 0.75 },
{ value: 4, text: "Trifft eher nicht zu", score: 1 },
{ value: 5, text: "Trifft zu", score: 1.25 },
{ value: 6, text: "Trifft voll zu", score: 1.5 }
];
// State to keep track of the current question
const [currentQuestion, setCurrentQuestion] = useState(0);
const questionsRef = useRef(questions);
// State to keep track of the current response
const [responses, setResponses] = useState(Array(questions.length).fill(0));
const [chartData, setChartData] = useState({});
useEffect(() => {
// Array of categories
const categories = ["Juristische Dimension", "Ökonomische Dimension", "Politische Dimension", "Technische Dimension", "Soziale Dimension", "Kreative Dimension"];
// Code to calculate the scores for each category
const categoryScores = Array(6).fill(0);
questionsRef.current.forEach((_, i) => {
categoryScores[Math.floor(i/4)] += responses[i];
});
// Set the chartData state with the calculated category scores
setChartData({
labels: categories,
datasets: [{
label: "Score",
data: categoryScores,
backgroundColor: 'rgba(0, 128, 47, 0.5)',
borderColor: 'rgba(0, 128, 47, 0.1)'
}],
});
}, [responses]);
// Data for the radar chart
ChartJS.register(
RadialLinearScale,
PointElement,
LineElement,
Filler
);
const myImage = new Image(25, 25);
myImage.src = 'https://i.stack.imgur.com/gXQrT.png';
return (
<div>
{currentQuestion === questions.length - 1 ? (
<Radar
data={chartData}
options={{
scale: {
beginAtZero: true,
max: 6,
min: 0,
ticks: {
stepSize: 1,
}
}
}}/>
) : (
<div>
<p>In meinem direkten Arbeitsumfeld .../ In der Gruppe in der ich mich wohl fühle ... <br></br> {questions[currentQuestion]}</p>
{options.map((option) => (
<button
key={option.value}
onClick={() => {
setResponses(
responses.map((response, index) => {
if (index === currentQuestion) {
return option.score;
}
return response;
})
);
setCurrentQuestion(currentQuestion + 1);
}}
>
{option.text}
</button>
))}
</div>
)}
</div>
);
};
1条答案
按热度按时间myzjeezk1#
您必须在下面的代码中删除该-1。
我不知道雷达组件是什么,但看起来你想在所有问题显示后呈现它。currentQuestion从0开始,所以条件必须是n+1,这个逻辑已经实现。