反應功能組件不呈現

Question

如果 function getConjugation 沒有返回錯誤，則 function validate 應該返回元素，有效的輸入被傳遞給 getConjugation，但它只是在瀏覽器中不呈現任何內容

import React from 'react'
import {getConjugation} from 'german-verbs'
import GermanVerbsDict from 'german-verbs-dict'

export default ({word})=>{
    const renderVerbs =(w)=>{

        return (

    }

    const validate = (w) =>{
        try{
            return(
            <ul>
               <li>{w.toLowerCase()}</li>
               <li>{getConjugation(GermanVerbsDict, "haben",'PRASENS', 2,'S' )}</li>
               <li>{getConjugation(GermanVerbsDict,"haben",'PRATERITUM', 1,'S' )}</li>
               <li>{getConjugation(GermanVerbsDict, "haben",'PERFEKT', 1,'S', "HABEN")}</li>
            </ul>)
        }catch {return false}
    }
    return (
        <div className="verb">{validate(word)}</div>


    )
}

Answer 1

你可以嘗試 3 件事

1. 完成 renderVerbs function 因為現在缺少一個括號。
2. 這部分代碼似乎被導出了。 您是否已將此組件添加到它應該在的位置？
3. 檢查是否實際調用了validate function。 這就是我要做的。

const validate = (w) =>{
            console.log("the word is: ", w);
            return(
            <ul>
               <li>{w.toLowerCase()}</li>
               //if your function return an array
               YourArray.map(elem => (
                  <li>{elem}</li>
               ))
            </ul>)
        }
    }
    return (
        <div className="verb">{validate(word)}</div>
    )

如果它確實有效，請一次添加一個額外的塊代碼，直到出現此處提到的原始代碼。 希望你能在這個過程中發現哪一部分是錯誤的。 祝你好運。