React - 父級傳遞數據給子級變得未定義

Question

我正在獲取一個名為 Quiz 的對象。 我試圖將測驗 (questionAnswerPair) 的單個元素傳遞給名為 QuestionAnswer 的子元素。

測驗收集得很好，每個元素都可以迭代。 然而，集成目前沒有按預期工作，盡管這不是我發帖的原因。

我的帖子的原因是 QuestionAnswerPair 沒有正確傳遞給子元素（在子組件中打印時顯示未定義）。

家長：

export default function Quiz() {

  var passedid = 1; //need to replace this with passed quiz ID
  const [quiz, setQuiz ]=useState('')
  const [executedFetch, setExecutedFetch]=useState('')

  useEffect(() => {
    fetch(`http://XXX.XXX.XXX.XXX:8080/Quiz/${passedid}`)
    .then(response => response.json())
    .then(json => { 
      console.log(json)
      setQuiz(json)
      setExecutedFetch(true)
     })
  },[]) 

  const [currentQuestionAnswerPair, setCurrentQuestionAnswerPair]=useState('')
  const [executedIterate, setExecutedIterate]=useState('')

  //this runs twice, once before the data collection and 
  //one after which is why it needs the conditional if
  useEffect(() => {
    if (executedFetch === true){
      for (var i=0; i < quiz.questionAnswerPairs?.length; i++ )
      {
        console.log(quiz.questionAnswerPairs[i]) //prints current fine
        setCurrentQuestionAnswerPair(quiz.questionAnswerPairs[i])
        setExecutedIterate(true)

        // make it wait till the question is answered somehow
        // then store the answer within an attempt
      }
      //set entire attempt here
    }
  },[executedFetch])

  const[ userSelectionData, setUserSelectionData]=useState('')

  const childToParent = (userSelectionData) => {
    setUserSelectionData(userSelectionData);
  }

  const parentToChild = () => {
    setParentToChildData(currentQuestionAnswerPair);
  }

  if (executedIterate === true){
    console.log("executedIterate " + executedIterate)
    console.log(currentQuestionAnswerPair)
    
    return (

        <br/> <br/> <br/> <br/>
        parent data = {userSelectionData}
        <br/> <br/> <br/> <br/>
        <QuestionAnswer parentToChild={currentQuestionAnswerPair} childToParent={childToParent}/>
      </div>
    );
  }

  else{
    return (
      <div className="App">
        not displaying
      </div>
    );
  }
}

孩子：

export default function QuestionAnswer({currentQuestionAnswerPair,childToParent})  {

    const userSelectionData = "child data passed"

    const [questionAnswer, setQuestionAnswer]=useState('')
    useEffect(() => {
        console.log(currentQuestionAnswerPair) // this is undefined
        setQuestionAnswer(currentQuestionAnswerPair)
    },[])

    console.log(currentQuestionAnswerPair) // this is undefined
    console.log(questionAnswer) // this is undefined

    return (
        <div>
            <br/>
            current question answer = {questionAnswer}
            <br/> <br/>
            current question answer pair = {currentQuestionAnswerPair}
            <br/> <br/>
            <Button primary onClick={() => childToParent(userSelectionData)}>Click Child</Button>

        </div>
    )
}

此外，將依賴傳遞給孩子 useEffect [currentQuestionAnswerPair] 不會改變問題

控制台輸出：

Answer 1

改變這一行，

<QuestionAnswer parentToChild={currentQuestionAnswerPair} childToParent={childToParent}/>

對此：

<QuestionAnswer currentQuestionAnswerPair={currentQuestionAnswerPair} childToParent={childToParent}/>

當您傳遞道具時， parentToChild和childToParent ，而不是currentQuestionAnswerPair和childToParent ，道具currentQuestionAnswerPair始終未定義