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"
    }
]

当我点击导航中的一个链接时，它会转到新页面。这很好。

问题是我在浏览器中单击后退回Portal。然后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的列表值。

当我刷新页面时，一切正常。

有什么建议吗？

更新

数据文件（从中获取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;
}

更新2

陈列室组件如下：

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

View组件如下：

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>
    )
  }

然后是Circles组件

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

如果data.getAllLists();是同步的东西，你可以做这样的事情。避免渲染中的逻辑，它必须尽可能更纯。

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>
  );
 }
})

单击浏览器的后退按钮不起作用

1 个答案: