クリックして、次のように

Question

私の主なコンポーネントPortal.jsは動作しません：次のように

class Portal extends React.Component { 
render() { 
    const language = this.props.currentLanguage.default; 
    const allShowrooms = data.getAllLists(); 

    return (
     <div className="mainPortal"> 
      <Navigation type="status" /> 
      <Showrooms allLists={allShowrooms} language={language}/> 
     </div> 
    ); 
} 
} 

このページのロードallShowroomsは次のとおりです。

allShowrooms = [ 
    { 
     id: 1, 
     name: "All brands stock sale mei", 
     expires: "Sat Oktober 01 2016 15:58:59 GMT+0200", 
     type: "Fixed" 
    }, { 
     id: 2, 
     name: "List number Two", 
     expires: "Sat November 05 2016 23:59:59 GMT+0200", 
     type: "Fixed" 
    }, { 
     id: 3, 
     name: "List number Three", 
     expires: "Tue November 29 2016 23:59:59 GMT+0200", 
     type: "Unfixed" 
    } 
] 

私は1つをクリックすると、ナビゲーション内のリンクのうち、新しいページに移動します。それはうまく動作します。

問題は、ポータルに戻るためにブラウザで戻るときです。その後allShowroomsに変更されます。

[ 
{ 
    "id":3, 
    "name":"All brands stock sale mei", 
    "expires":"Sat Oktober 01 2016 15:58:59 GMT+0200", 
    "type":"Fixed" 
}, 
{ 
    "id":3, 
    "name":"List number Two", 
    "expires":"Sat November 05 2016 23:59:59 GMT+0200", 
    "type":"Fixed" 
}, 
{ 
    "id":3, 
    "name":"List number Three", 
    "expires":"Tue November 29 2016 23:59:59 GMT+0200", 
    "type":"Unfixed" 
} 
] 

したがって、allShowrooms内のすべてのリストのIDが3なぜに変更されました？

写真を表示するときに問題があり、サークル内の値はリストIDで値を取得するためです。私は今、すべてのリストについて、私はID 3のリストの値を持っています。

私はページを更新するとすべてが問題ありません。

アドバイスはありますか？

更新

データファイル（からIを取得ここallShowroom = data.getAllLists（））

let allLists = [ 
    { 
     id: 1, 
     name: "All brands stock sale mei", 
     expires: "Sat Oktober 01 2016 15:58:59 GMT+0200", 
     type: "Fixed" 
    }, { 
     id: 2, 
     name: "List number Two", 
     expires: "Sat November 05 2016 23:59:59 GMT+0200", 
     type: "Fixed" 
    }, { 
     id: 3, 
     name: "List number Three", 
     expires: "Tue November 29 2016 23:59:59 GMT+0200", 
     type: "Unfixed" 
    } 
]; 


export function getAllLists(){ 
    return allLists; 
} 

UPDATE 2

ショールーム成分は以下の通りである：

render(){ 
    const language = this.props.currentLanguage; 
    return (
     <div> 
     {this.props.allLists.map((list, i) => <View key={i} list={list} language={language}/>)} 
     </div> 
    ) 
} 

次のように

とビューコンポーネントは次のとおりです。data.getAllLists();は、あなたがこのような何かを行うことができ、同期のものであるならば、

render(){ 
    const list = this.props.list; 
    const url = list.id; 
    const remainingTime = this.props.remainingTime; 
    const language = this.props.language; 

    return (
     <div className="block"> 
      <div className="listName">{list.name}</div> 
      <div className="listBody"> 

           <div className="counter"> {remainingTime.days} days  {remainingTime).hours} : {remainingTime.minutes} : {remainingTime.seconds}</div> 

           <Circles language={language} list={list} /> 

           <Status list={list}/> 
         </div> 
         <Link to={`/showroom/${url}/`}>{language.portal.openShowroom}</Link> 
     </div> 
    ) 
    } 

とは、コンポーネント

render(){ 
    let {list, language} = this.props; 
    const allCars = data.getAllCars(); //We get list of all cars 
    const cars = carData.getCarsInCurrentList(list.id, allCars); //We get all cars, but only from this list 
    const totalCarsInTheList = cars.length; 
    const statusTotalCars = data.getUserOnGoingStatus().filter(s => s.listID === list.id && s.userID === userInfo.getUserEmail()).length; 

    return (
     <div className="circles-box"> 
      <div className="circle-left"> 
       <div className="circle-content"> 
        <div className="circle-total-cars">{totalCarsInTheList}</div> 
        <div className="circle-subtitle">{language.portal.nrCars}</div> 
       </div> 
      </div> 
      <div className="circle-right"> 
       <div className="circle-content"> 
        <div className="circle-total-cars">{statusTotalCars}</div> 
        <div className="circle-subtitle">{language.portal.status}</div> 
       </div> 
      </div> 
     </div> 
    ); 
} 

Answer 1

サークル。あなたのレンダリングではロジックを避け、できるだけ純粋でなければなりません。

class Portal extends React.Component { 
constructor (props, context) { 
    super(props, context); 
    this.allShowrooms = data.getAllLists(); 
    this.language = props.currentLanguage.default; 
} 
render() { 

    return (
    <div className="mainPortal"> 
     <Navigation type="status" /> 
     <Showrooms allLists={this.allShowrooms} language={this.language}/> 
    </div> 
); 
} 
})