ReactforEach函式不呈現HTML

我有一個 React 組件，它具有呈現音樂學分串列的功能。titles是字串props.current.credits物件，也是陣列物件（它們是從更大的 JSON 中提取的，因此不能選擇更改資料結構）。

const titles = {
    featuring: "Featuring",
    recorded: "Recorded at",
    samples: "Samples",
    ...etc
}

props.current.credits = {
    "writers": ["John Doe", "Sally Singer"],
    "recorded": [{
        "studio": "ABC Studios",
        "city": "Houston, Texas"
    }],
    ...etc
}

該函式只呈現h2標簽，而不是代碼塊中的p標簽。forEach當我forEach通過登錄name到控制臺來測驗這些塊時，會出現這些值，所以我完全不知道問題可能是什么。對此的一些見解將不勝感激。

const Credit = props => {
    const credit = type => {
        if (props.current.credits.hasOwnProperty(type)) {
            if (type === "recorded") {
                return (
                    <div className="credit">
                        <h2>{titles[type]}</h2>
                        {
                            props.current.credits[type].forEach(name => {
                                return (
                                    <p className="location">
                                        <span className="studio">{name.studio}</span>
                                        <span className="city">{name.city}</span>
                                    </p>
                                )
                            })
                        }
                    </div>
                )
            }

            if (type === "samples" || type === "interpolates") {
                return (
                    <div className="credit">
                        <h2>{titles[type]}</h2>
                        {
                            props.current.credits[type].forEach(name => {
                                return (
                                    <p className="location">
                                        <span className="studio">{name.title}</span>
                                        <span className="city">{{ __html: name.info }}</span>
                                    </p>
                                )
                            })
                        }
                    </div>
                )
            }

            return (
                <div className="credit">
                    <h2>{titles[type]}</h2>
                    {
                        props.current.credits[type].forEach(name => {
                            return (
                                <p>{name}</p>
                            )
                        })
                    }
                </div>
            )
        }
        return null;
    }
    
    return (
        <div>
            {credit("samples")}
        </div>
    )
}

uj5u.com熱心網友回復：

根據官方檔案，您應該使用map.

所以一個例子是：

{
  props.current.credits[type].map((name) => {
    return (
      <p className="location">
        <span className="studio">{name.studio}</span>
        <span className="city">{name.city}</span>
      </p>
    );
  });
}

uj5u.com熱心網友回復：

forEach方法不回傳任何內容。它回傳undefined。改用地圖。map 方法總是在最后回傳一個陣列。

標籤：javascript 反应

上一篇：JS使用物件動態鍵名

下一篇：在JavaScript中獲取具有相同名稱的多個選中復選框的值