从 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 的三元条件也很重要。