React：APIオブジェクトから配列を作成し、値に対してランダムに1つの要素を選択するにはどうすればよいですか？

Question

x、y座標の配列を作成してから、値にランダムに配置する方法を知っていますか？

<g id="lines"> 
    {data.sites.map((item, i) => { 
    let findX = (180 + item.attributes.address.Longitude) * (1552/360); 
    let findY = (90 - item.attributes.address.Latitude) * (818/ 180); 
let randoXY = findX + ',' findY (and randomly selects one of the X, Y values); 
     return (
    <path key={i + i + '--'} id={'line' + (i + 1)} class="cls-3" d={'M' + findX + ',' 
+ findY +'L' + randoXY} /> 
          ) 
    })} 
</g> 

Answer 1

いくつかのランダムな点が含まれますarray作成します。

let arr = [0,1,2,3,4,5,6,7,8,9]; 

を次に（いつもの値を掛けインデックスは常にarrayの長さの範囲内にあることを確認し、ランダムなインデックスを選択するMath.random()を使用しますMath.random()この方法では配列の長さで決して長さより大きくなりません）、Math.floor()を使用して値を整数に変換します。

アレイからランダムにxとyの値を選択するためにこれを使用する：

<g id="lines"> 
    {data.sites.map((item, i) => { 
     let findX = (180 + item.attributes.address.Longitude) * (1552/360); 
     let findY = (90 - item.attributes.address.Latitude) * (818/ 180); 
     let x = a[Math.floor(Math.random() * 10)]; 
     let y = a[Math.floor(Math.random() * 10)]; 
     return (
      <path 
       key={i + i + '--'} 
       id={'line' + (i + 1)} 
       class="cls-3" 
       d={`M${findX}, ${findY}L${x},${y}`} /> 
     )}) 
    } 
</g>