從React.js中的狀態數組渲染特定值

Question

我正在使用React.js，State和渲染為9洞高爾夫球場創建在線記分卡應用程序。 用戶輸入他或她對每個洞的分數，該分數會將“洞數”和“洞數”“推”到該州的一個數組（稱為golferOneScore）中。 但是，要想通過數組方法基於數​​組中的孔的值嘗試通過map方法顯示每個孔的分數，向瀏覽器進行渲染非常困難...

我試着在我的html區域中繪制出陣列（特別是一個孔號）。 它可以工作，但是這樣做限制了每個地圖只能顯示一個孔。 隨着時間在洞2上映射分數，我丟失了在洞1中在瀏覽器中顯示的條目。

{this.state.golferOneScore.map((data) =>  {
    if (data.hole == 1) { 
        return (<tr><td>golferOne</td><td>{data.score}</td></tr>)
        })};

即使高爾夫球手出於任何原因應跳過一個洞，也希望可以在9個洞中准確顯示分數。

Answer 1

了解到我可以簡單地對每個打高爾夫球的洞使用查找方法

{this.state.nameOneScore.find(scores => scores.hole === '1').score}

控制null的三元條件也很重要。