React組件不會在地圖功能上列印

該組件不會在地圖功能上列印，我在里面設定了一個 console.log 以確保回圈迭代及其迭代，但沒有列印任何內容

import React from 'react';
import TherapeuticResultElement from "./TherapeuticResultElement"


function TherapeuticResult() {
    return (
        <div>
            <div className="card shadow py-2 mb-4">
                <div className="card-body">
                    <div id="">
                        <div className="">
                            <div className="row">
                                {
                                    window.COMPOSITE_CATEGORIES.map((category) => {
                                       if(category.composites.length > 0){
                                           console.log(category);//info is shown on console
                                            <div>AAAAAAA</div>
                                       }
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )

}

export default TherapeuticResult;

uj5u.com熱心網友回復：

利用

{
    window.COMPOSITE_CATEGORIES
    .filter(category=>category.composites.length > 0)
    .map((category) => {
          console.log(category);//info is shown on console
          return (
                  <div>AAAAAAA</div>
          );
    })
} 

代替

{
    window.COMPOSITE_CATEGORIES.map((category) => {
      if(category.composites.length > 0){
          console.log(category);//info is shown on console
            <div>AAAAAAA</div>
        }
    })
}   

uj5u.com熱心網友回復：

您需要在代碼中回傳。試著這樣說：

import React from 'react';
import TherapeuticResultElement from "./TherapeuticResultElement"


function TherapeuticResult() {
    return (
        <div>
            <div className="card shadow py-2 mb-4">
                <div className="card-body">
                    <div id="">
                        <div className="">
                            <div className="row">
                                {
                                    window.COMPOSITE_CATEGORIES.map((category) => {
                                       if(category.composites.length > 0){
                                           console.log(category);//info is shown on console
                                           return (
                                             <div>AAAAAAA</div>
                                           )
                                       } else {
                                        // Add your else block with "return (<code>)"
                                       }
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )

}

export default TherapeuticResult;

uj5u.com熱心網友回復：

您的Array.map()回呼函式需要回傳一個值，在您的情況下應該是這樣的：

<div className="row">
  {
      window.COMPOSITE_CATEGORIES.map((category) => {
         if(category.composites.length > 0){
             console.log(category);//info is shown on console
              return (<div>AAAAAAA</div>)
         }
      })
  }
</div>

標籤：javascript反应

上一篇：從搜索欄中洗掉單詞時，獲取自動建議下拉選單的問題消失了

下一篇：如何使用狀態掛鉤更新陣列的各個元素？