我有一個React 本機函式Quiz，我在其中發出 fetch GET請求。我檢查資料是否已加載showQuestion變數。但不知何故，當資料加載應用程式時，它會回傳此錯誤訊息：
無法讀取未定義的屬性（評估 'questObj[currentQuestion].questionText'）
我試圖列印資料questObj[currentQuestion]，這給了我一個充滿資料的物件。下圖是console.log.
console.log(questObj[currentQuestion]);
關于我可能做錯的任何建議？（我是React Native 的新手，所以這可能是我做錯了。）
export function Quiz(this: any) {
const styles = StyleSheet.create({
container: {
backgroundColor: '#B86566',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center'
},
headingColumn: {
flexBasis: '90%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flex: 1,
padding: 20,
fontSize: 30,
},
buttonColumn: {
flexBasis: '35%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flex: 1,
padding: 20,
margin: 20,
borderColor: 'white',
borderWidth: 1
},
row: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
width: '100%'
},
});
const [showScore, setShowScore] = useState(false);
const [showQuestion, setShowQuestion] = useState(false);
const [currentQuestion, setCurrentQuestion] = useState(0);
const [score, setScore] = useState(0);
const [questionArray, setQuestions] = useState(0);
useEffect(() => {
getQuestions();
}, []);
let questObj: {
questionText: any;
answerOptions: any;
}[] = [];
const getQuestions = async () => {
try {
let response = await fetch(
'https://opentdb.com/api.php?amount=10&category=26&difficulty=medium&type=multiple'
);
let json = await response.json();
json.results.forEach((element: { question: any; correct_answer: any; incorrect_answers: any; }) => {
questObj.push({
questionText: element.question,
answerOptions: [{ answerText: element.correct_answer, isCorrect: true },
{ answerText: element.incorrect_answers[0], isCorrect: false },
{ answerText: element.incorrect_answers[1], isCorrect: false },
{ answerText: element.incorrect_answers[2], isCorrect: false }
],
},
);
console.log(questObj[currentQuestion]);
setShowQuestion(true);
});
} catch (error) {
console.error(error);
}
}
const handleAnswerButtonClick = (isCorrect: boolean) => {
if (isCorrect) {
setScore(score 1);
}
const nextQuestion = currentQuestion 1;
if (nextQuestion < questObj.length) {
setCurrentQuestion(nextQuestion);
} else {
setShowScore(true);
}
};
return <View style={styles.container}>
<View><Text></Text></View>
<View>{showScore ?
<Text>You scored {score} out of {questObj.length}</Text>
: <></>}
</View>
{showQuestion ?
<View>
<View >
<Text>Question {currentQuestion 1}/{questObj.length} </Text>
</View>
<View style={styles.row}>
<Text style={Object.assign(styles.headingColumn)}>{questObj[currentQuestion].questionText}</Text>
</View>
<View style={styles.row}>
{questObj[currentQuestion].answerOptions.map((answerOption: { answerText: string; isCorrect: boolean; }, index: any) => (
<Text style={Object.assign(styles.buttonColumn)}>
<Button
title={answerOption.answerText}
onPress={() => handleAnswerButtonClick(answerOption.isCorrect)}
color="#fff">
</Button>
</Text>
))}
</View>
</View>
: <></>}
</View>;
}
uj5u.com熱心網友回復：
使用 react 時，您永遠不想從源中獲取資料并手動嘗試控制狀態。這就是useState():)。
您正在處理的任何型別的資料（大多數情況下，除了少數例外）都應該使用某種useState()鉤子來處理和維護。
如果不使用useState()，React 將不知道您要在 dom 中渲染的資料已使用實際資料進行了更新！
因此，當您questObj[currentQuestion].questionText在 JSX 內部呼叫時，react 看不到任何資料（因為您只是將資料推送到陣列上并且沒有觸發正確的重新渲染），并說“嘿，這里沒有資料作為物件”。
此外，請確保您正確收集了正確的狀態以選擇currentQuestion. 如果您只選擇一個，則必須遍歷一個物件陣列，然后識別與您當前問題匹配的物件鍵......除非您只是離開陣列索引，那么我想應該沒問題！
祝你好運！
以下是 的修復useState()，或缺少的修復。
export function Quiz(this: any) {
const styles = StyleSheet.create({
container: {
backgroundColor: "#B86566",
width: "100%",
height: "100%",
alignItems: "center",
justifyContent: "center",
},
headingColumn: {
flexBasis: "90%",
display: "flex",
flexDirection: "column",
alignItems: "center",
flex: 1,
padding: 20,
fontSize: 30,
},
buttonColumn: {
flexBasis: "35%",
display: "flex",
flexDirection: "column",
alignItems: "center",
flex: 1,
padding: 20,
margin: 20,
borderColor: "white",
borderWidth: 1,
},
row: {
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
width: "100%",
},
});
const [showScore, setShowScore] = useState(false);
const [showQuestion, setShowQuestion] = useState(false);
const [currentQuestion, setCurrentQuestion] = useState(0);
const [score, setScore] = useState(0);
const [questionArray, setQuestions] = useState(0);
useEffect(() => {
getQuestions();
}, []);
// let questObj: {
// questionText: any;
// answerOptions: any;
// }[] = [];
// you need to use Use state for any state that you are holding! That's the whole point of react!
const [questObjState, setQuestObjState] = useState([]);
const getQuestions = async() => {
try {
let response = await fetch(
"https://opentdb.com/api.php?amount=10&category=26&difficulty=medium&type=multiple"
);
let json = await response.json();
// use map here to return new array rather than just opertate
const newArrayOfData = json.results.map(
(element: {
question: any,
correct_answer: any,
incorrect_answers: any,
}) => {
return {
questionText: element.question,
answerOptions: [{
answerText: element.correct_answer,
isCorrect: true,
},
{
answerText: element.incorrect_answers[0],
isCorrect: false,
},
{
answerText: element.incorrect_answers[1],
isCorrect: false,
},
{
answerText: element.incorrect_answers[2],
isCorrect: false,
},
],
};
// questObj.push({
// questionText: element.question,
// answerOptions: [
// {
// answerText: element.correct_answer,
// isCorrect: true,
// },
// {
// answerText: element.incorrect_answers[0],
// isCorrect: false,
// },
// {
// answerText: element.incorrect_answers[1],
// isCorrect: false,
// },
// {
// answerText: element.incorrect_answers[2],
// isCorrect: false,
// },
// ],
// });
// console.log(questObj[currentQuestion]);
// setShowQuestion(true);
},
setQuestObjState(newArrayOfData)
);
} catch (error) {
console.error(error);
}
};
const handleAnswerButtonClick = (isCorrect: boolean) => {
if (isCorrect) {
setScore(score 1);
}
const nextQuestion = currentQuestion 1;
if (nextQuestion < questObj.length) {
setCurrentQuestion(nextQuestion);
} else {
setShowScore(true);
}
};
return ( <
View style = {
styles.container
} >
<
View >
<
Text > < /Text> <
/View> <
View > {
showScore ? ( <
Text >
You scored {
score
}
out of {
questObj.length
} <
/Text>
) : ( <
> < />
)
} <
/View> {
showQuestion ? ( <
View >
<
View >
<
Text >
Question {
currentQuestion 1
}
/{questObj.length}{" "} <
/Text> <
/View>
<
View style = {
styles.row
} >
<
Text style = {
Object.assign(styles.headingColumn)
} > {
questObj[currentQuestion].questionText
} <
/Text> <
/View> <
View style = {
styles.row
} > {
questObj[currentQuestion].answerOptions.map(
(
answerOption: {
answerText: string,
isCorrect: boolean,
},
index: any
) => ( <
Text style = {
Object.assign(styles.buttonColumn)
} >
<
Button title = {
answerOption.answerText
}
onPress = {
() =>
handleAnswerButtonClick(
answerOption.isCorrect
)
}
color = "#fff" >
< /Button> <
/Text>
)
)
} <
/View> <
/View>
) : ( <
> < />
)
} <
/View>
);
}https://stackoverflow.com/questions/70712396/error-undefined-is-not-an-object-in-react-native#轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/411165.html
標籤：
上一篇：axios回應解構未定義
下一篇：平面串列中的文本離開螢屏反應原生