我正在 React 中構建這個簡單的測驗應用程式，Data.json螢屏上顯示來自 40 項的隨機韓語韓文，用戶有 5 個不同答案的按鈕，它們也來自Data.json.
為了澄清，這是我的應用程式和我正在使用的組件。所有組件都是兄弟姐妹并存在于內部App.js。
應用程式要做的是創建一個 5 項隨機陣列，并在渲染之前選擇其中一項作為正確答案。如果用戶點擊右鍵，所有組件都應該使用不同的專案重新渲染。這就是我決定使用useEffect()鉤子的原因。
但目前正在發生的是：
- 每個
console.log都在控制臺中顯示兩次。第一次變數為空，第二次顯示它們應該具有的值； - randomOptions 陣列有 10 個專案而不是 5 個；
- 如果
<Question/>組件在代碼中，那么我會收到錯誤并console.log告訴我useState掛鉤中的值是未定義的。如果<Question/>被洗掉，我會得到下圖所示的控制臺。
用于澄清的控制臺：
App.js零件：
import './App.css';
import Data from './data/data.json';
import Header from './components/Header';
import Question from './components/Question';
import { useState, useEffect } from 'react';
function App() {
const [index, setIndex] = useState(Math.floor(Math.random() * 5)); // Tells us what the index of the right answer is
const [randomOptions, setRandomOptions] = useState([]); // Random array with 5 items from Data.json that are the options
const [question, setQuestion] = useState([]); // The question that goes to <Question/> and people need to guess
const randomizeButtonAnswer = () => {
let previousArray = randomOptions;
setRandomOptions([]);
for (let i=0; i < 5; i ){
let randomNumber = Math.floor(Math.random() * Data.length);
if (!randomOptions.includes(randomNumber) && !previousArray.includes(randomNumber)) {
setRandomOptions(randomOptions.push(randomNumber));
} else {
i--;
}
}
setRandomOptions(randomOptions.sort(() => Math.random() - 0.5));
setQuestion(randomOptions[index]);
}
useEffect(() => {
randomizeButtonAnswer();
}, [index])
console.log('index is ' index); // 3
console.log('randomOptions is ' randomOptions); // 33,9,3,26,8,20,0,12,29,25
console.log('question is ' question); //26
return (
<div className="App">
<Header />
<Question answer={question}/>
</div>
);
}
export default App;
Question.js零件
import './Question.css';
import Data from '../data/data.json';
const Question = ({ answer }) => {
return (
<div className="question-wrapper">
<h1 className="question"><span className="highlight">{Data[answer].character}</span></h1>
<span>{Data[answer].character} = {Data[answer].char_id} </span>
</div>
);
}
export default Question;
我完全迷失在這里。不知道為什么事情會被渲染兩次，或者為什么存在時<Question/>會使我的變數變得未定義。我認為里面randomizeButtonAnswer的東西壞了，但我一直無法找到到底是什么。
小免責宣告：我完全是 React 的菜鳥，所以如果我做錯了什么或不正確的做法，請告訴我。
謝謝你的時間！
uj5u.com熱心網友回復：
我試圖修復你的代碼，但它在很多方面都很復雜和錯誤，所以我決定自己撰寫這個函式。對于那個很抱歉。
這是代碼框
你的代碼有很多問題。
- 約log 2次。這是
<StrictMode /> - 你應該更多地了解 React State。它不會在您撰寫它的地方立即更改，它會在您的函式結束時排隊并更新。在 1 個函式中設定 1 個狀態 2 個時間并不意味著什么。
- 不要
i--在 for 回圈中做這樣的事情，這很難理解事情的進展并且難以除錯。使用 while 回圈或最好只是don't. 檢查條件并注銷或對其進行處理。 - 要登錄嗎？登錄 React 組件？使用
useEffect. - Question 的默認狀態不是 []。
- 如果狀態的默認值可能是
nullor ，則始終進行條件渲染undefined。
祝你的 React 之旅好運。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/503651.html
上一篇：合并陣列中的重復元素