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