私の子供のReactコンポーネントを親状態の変化を検出する関数の中にラップする必要があるのはなぜですか？

Question

これは私のコードですが、下に表示されているように見えますが、動作しません。

MainComponentのselectDayメソッドを使用して、データを取得するためのTableComponentのURLを変更したい当日は

class MainComponent extends React.Component{ 

constructor(props) { 
    super(props); 
    this.state = { 
     urls: [{ 
      appointmentsUrl: "/api/appointments", 
      callsUrl: "/api/calls" 
     }] 
    } 
} 

selectDay(day) { 
    if(day.key == 1) { 
     this.setState({ 
      urls: [{ 
       appointmentsUrl: "/api/appointments", 
       callsUrl: "/api/calls" 
      }] 
     }) 
    } else { 
     this.setState({ 
      urls: [{ 
       appointmentsUrl: "/api/appointments2", 
       callsUrl: "/api/calls2" 
      }] 
     }) 
    } 
} 

    render() { 
    var calendarData = [//init some array of dates]; 


    return (
     <div> 
      <TopMenuComponent/> 
      <div className="contentContainer"> 
       { 
        ((urls)=>{ 
         return(
          <TableComponent key={urls[0].appointmentsUrl} appointmentsUrl={urls[0].appointmentsUrl} callsUrl={urls[0].callsUrl}/> 
         ) 
        })(this.state.urls) 
       } 
      </div> 
     </div> 
    ) 
} 

これは動作しますが、私は希望するようなものであるようなものである選択されています

<TableComponent appointmentsUrl={this.state.appointmentsUrl} callsUrl={this.state.callsUrl}/> 

として状態を初期化：this.state= {appointmentsUrl: "/api/appointments", callsUrl: "/api/calls"}

あなたが質問で表される構造で、あなたの状態を持っている、とあなたはその配列内の最初のオブジェクトを使用する場合は

Answer 1

（あなたは非構造構文が有効になっていると仮定します）：

function render() { 
    const [firstUrlObj] = this.state.urls 
    return (
    <div> 
     <TopMenuComponent/> 
     <div className="contentContainer"> 
     <TableComponent appointmentsUrl={firstUrlObj.appointmentsUrl} callsUrl={firstUrlObj.callsUrl}/> 
     </div> 
    </div> 
) 
} 

あなたがレンダリングしたい場合全体の配列：あなたは配列内の単一のオブジェクトを持っていて、より多くのを持ってする予定がない場合は

function render() { 
    const urls = this.state.urls 
    return (
    <div> 
     <TopMenuComponent/> 
     <div className="contentContainer"> 
     { urls.map(urlObj => <TableComponent appointmentsUrl={urlObj.appointmentsUrl} callsUrl={urlObj.callsUrl}/>) } 
     </div> 
    </div> 
) 
} 

は、私は他の答えを見てお勧めします。