なぜ予期しないトークンを教えてくれリアクトん「」

Moopsish：

私は私に予期しないトークンを伝え、画面上のJSON配列を表示しようとしているが、反応しています「」私は今、3時間の周りに検索しましたが、私は間違っているかを把握することができないか、この問題を解決する方法について説明します。詳細オブジェクトの他の部分のすべての表示が正しくなく、配列がちょうどに望んでいないいくつかの理由があります。私は誰かがこの問題で私を助けることができると思います。

私が手に正確なエラーは以下のとおりです。

コンソールログにJSON。

以下のコンポーネントのための私のコードです。

function GeneDetail({ match }) {

    useEffect(() => {
        fetchDetails();
    }, []);

    const [detail, setDetail] = useState({})
    //const [alleles, setAlleles] = useState([])

    const fetchDetails = async () => {
        const fetchDetails = await fetch(
            '/api/get_genedetail?g='+match.params.genename+''
        );
        const detail = await fetchDetails.json()
        setDetail(detail)
        //setAlleles(detail.alleles)
    }
    console.log('alleles', detail.alleles)

    return(
    <div className="main-content">
        <Container maxWidth="lg">
            <div className="grid-container">
                <div className="grid-title">
                    <h2>Gene: <i>{detail.geneName}</i></h2>
                </div>
                <div className="grid-subtitle">
                    <h3>Type: {detail.segmentFullName}</h3>
                </div>
                <div className="grid-alleles">
                    test
                    {detail.alleles ?
                        {detail.alleles.map(function (allele, i) {
                            return <div key={i}>
                                <h5>{allele.Number}</h5>
                            </div>
                        })}
                     : (<p>"No alleles found."</p>)}
                </div>
            </div>
        </Container>
    </div>
    );
}

CerebralFart：

エラーが混乱することができます反応し、ここでの問題は、あなたがそこにドットを持っていることではありません。代わりに、あなたは基本的にこのように、変数式に変数式を宣言します。

{condition?{mappedData}:(alternative)}

あなたが式の中で表現を宣言することはできません、あなたはこのようにそれを書いている必要があります。

{detail.alleles ?
    detail.alleles.map(function (allele, i) {
         return <div key={i}>
             <h5>{allele.Number}</h5>
         </div>
    })
: (<p>No alleles found.</p>)}