メモ

[sumakokima2]

手順

• app.tsx ・interfaceの更新

  interface Data {
  id: string;
  name: string;
  show: boolean;
  lon: number;
  lat: number;
  }

  ・class

  state = {
  data: [],
  };
  componentDidMount() {
  this.loadData();
  }
  
  async loadData() {
  const result = await loadData();
  this.setState({ 
    data: result.data,
  });
  }

• data_app.ts

  
  export default async function loadData() {
  const data = await fetch("src/data_app.csv", {
    credentials: "same-origin",
  }).then(r => r.text());
  
  const csv = data
  .split("\n")
  .map(d => d.split(",").map(dd => dd.trim()))
  .filter(d => d.length > 0);
  
  return {
  data: csv.map((d, i) => ({
    id: i.toString(),
    name: d[1],
    show:true,
    lon: parseFloat(d[2]),  ←`parseFloat()`を入れないとエラー`Property 'lat' is missing in type '{ name: string; id: string; lon: number; show: boolean; }' but required in type 'Readonly<Props>'`
    lat: parseFloat(d[3])
  }))
  };
  }

 - earth.tsx

・Stateでピンの表示非表示配列を作成

interface State { pinsshow: boolean[]; imagesshow: boolean[]; pinsboolean:boolean; }

・コンストラクタ

constructor(props: Props){ super(props); this.state = { pinsshow: [true,true],　←初期値を入力 }; this.clickAction = this.clickAction.bind(this); }

・render

return (

{this.props.pins.map((d, i) => { return ( ); })} ``` ・pin.tsx ``` return ( ); ``` *** #### 詰まったところ **lonとlatのnumber設定** parseFloat()`を入れないとエラー *** #### 課題 なし