Данные из списка не отображаются при начальной загрузке

Question

Я пытаюсь создать приложение, которое будет иметь список элементов на своей домашней странице.

У меня уже есть некоторые предопределенные данные для отображения;это жестко закодировано в App.js.Вот структура (вы должны сосредоточиться в основном на методе render ()):

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import './App.css';
import Details from './components/Details';
import NewItem from './components/NewItem';
import List from './components/List';

const item0 = {
  id: 0,
  img_url: "https://static.adweek.com/adweek.com-prod/wp-content/uploads/2018/10/Screen-Shot-2018-10-17-at-1.25.22-PM.png",
  name: "Burger0",
  price: "10.60$",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed accumsan neque. Donec at nunc congue, iaculis justo vel, iaculis est. Vestibulum sit amet mauris a erat pulvinar dignissim. Duis finibus consequat fermentum. Pellentesque vulputate metus quis erat cursus, at consectetur libero euismod. Proin convallis maximus mi, ac sollicitudin velit."
}

const item1 = {
  id: 1,
  img_url: "https://static.adweek.com/adweek.com-prod/wp-content/uploads/2018/10/Screen-Shot-2018-10-17-at-1.25.22-PM.png",
  name: "Burger1",
  price: "10.60$",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed accumsan neque. Donec at nunc congue, iaculis justo vel, iaculis est. Vestibulum sit amet mauris a erat pulvinar dignissim. Duis finibus consequat fermentum. Pellentesque vulputate metus quis erat cursus, at consectetur libero euismod. Proin convallis maximus mi, ac sollicitudin velit."
}

const item2 = {
  id: 2,
  img_url: "https://static.adweek.com/adweek.com-prod/wp-content/uploads/2018/10/Screen-Shot-2018-10-17-at-1.25.22-PM.png",
  name: "Burger2",
  price: "10.60$",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed accumsan neque. Donec at nunc congue, iaculis justo vel, iaculis est. Vestibulum sit amet mauris a erat pulvinar dignissim. Duis finibus consequat fermentum. Pellentesque vulputate metus quis erat cursus, at consectetur libero euismod. Proin convallis maximus mi, ac sollicitudin velit."
}

const items = [item0, item1, item2];

class App extends Component {
  addItemToList = item => {
    items.push(item);
  }

  toogleMenu = () => {
    let x = document.getElementById("myLinks");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }

  render() {
    const toList = {
      pathname: "/",
      items: items
    }
    const toNewItem = {
      pathname: "/newitem/",
      addItemToList: this.addItemToList,
      listSize: items.length
    }

    return (
      <Router>
        <div className="container">
        <div className="topnav">
          <a href="#home" className="active">Logo</a>
          <div id="myLinks">
            <Link to={toList}>List</Link>
            <Link to={toNewItem}>New Item</Link>
          </div>
          <a href="javascript:void(0);" className="icon" onClick={this.toogleMenu}>
            <i className="fa fa-bars"></i>
          </a>
        </div>
        <Switch>
            <Route path="/newitem/" component={NewItem} />
            <Route path="/details/" component={Details} />
            <Route path="/" component={List} />
        </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

Однако данные из Списка не отображаются при начальной загрузке - я вижу только верхнюю панель навигации, ипустое место ниже.Как данные могут быть видны при загрузке, а также как они могут быть видны при каждом переходе к пути "/"?

После загрузки мне нужно открыть меню, нажать на «Список», и тогда данные отображаются нормально.Как я могу реализовать эту ситуацию по умолчанию?

Обновление:

Реализация списка:

import React, { Component } from 'react';
import ListItem from './ListItem';

class List extends Component {    
    populateList = () => {
        return this.props.location.items.map((el, i) => {
            return (
            <ListItem key={i} item={el} />
            );
        });
    }

    render() {
        if (this.props.location.items === undefined) {
            return <ul className="list"></ul>
        }
        return(
            <ul className="list">
                {this.populateList()}
            </ul>
        );
    }
}

export default List;

Данные для загрузки находятся вApp.js, потому что у меня также есть возможность добавить новый элемент, и я не смог найти другой способ обновить список элементов.Было бы идеально, если бы данные можно было поместить в List.js, а после добавления нового элемента обновить состояние List.js.

Answer 1

Реализация List в вашем вопросе получает items данные через location проп.Когда вы впервые загружаете свое приложение, URL вашего приложения, вероятно, будет https://my.app.com/ (корень), поэтому нет данных об элементах для отображения List.

Я бы решил следующим образом:

1) Измените List так, чтобы он мог получать items независимо от пути, например,

import React, { Component } from 'react';
import ListItem from './ListItem';

class List extends Component {    
    let items = [];
    populateList = () => {
        if (this.props.items) {
            this.items = this.props.items;
        } else { // No items via prop
           this.props.location.items.map((el, i) => {
            this.items.push(el)
           });
         }
    }

    render() {
        this.populateList()
        if (!this.items) {
            return <ul className="list"></ul>
        }
        return(
            <ul className="list">
                {this.items.map((el, i) =>
                  <ListItem key={i} item={el} />
                 }
            </ul>
        );
    }
}

export default List;

2) Измените маршрут '/' на

        <Route path="/" render={() => <List items={items}/>} />

Код выше только для иллюстрации и не проверен.