-1

Учу реакт. Есть 2 файла (см.ниже). Проблема находится (как я думаю) в файле Requests.js.

Итак, в рендере Request.js есть проверка условия на существования объекта data (props, в котором находятся данные из массива). При выполнении скрипта, вначале выводятся данные массива (выполняется true), а потом выводится "Заявок нет" (выполняется false). А этого быть не должно - должны выводиться (как я думаю) только данные из массива.

В чём ошибка?

Код:

App.js

import React, {Component} from 'react';
import './App.css';
import Navbar from './components/Navbar'
import Requests from './components/Requests'
import Routes from './components/Routes'
import PlacesToVisit from './components/PlacesToVisit'
import Contacts from './components/Contacts'
import { Route, BrowserRouter } from 'react-router-dom'



const arrayOfRequests = [
  {
    name:'Gregory',
    phone:'8-800-555-35-35',
    text:'hello'
  },
  {
  name:'Masha',
  phone:'8-820-525-35-35',
  text:'gutten morgen'
  },
  {
    name:'Dasha',
    phone:'8-210-555-35-35',
    text:'hi'
  },
]


class App extends Component {
  render() {
    return (
      <div>
        <div className="App">
        <Navbar />
        <Requests data={arrayOfRequests} />
        <BrowserRouter>
          <Route exact path='/' component={Requests}/>
          <Route path='/Routes' component={Routes} />
          <Route path='/Contacts' component={Contacts} />
          <Route path='/PlacesToVisit' component={PlacesToVisit} />
        </BrowserRouter>
      </div>
      </div>
    );
  }
}


export default App;

Requests.js

import React from 'react'


class Requests extends React.Component {
  render() {
    const { data } = this.props;
    let blocks

    if (data) {
      blocks = data.map(function(item) {
        return(
          <div>
            <p>{item.name}</p>
            <p>{item.phone}</p>
            <p>{item.text}</p>
          </div>
        );
      }) 
    }
    else {
      blocks = <p>Заявок нет</p>
    }

    return (
      <div>
        {blocks}
      </div>
    );
  }
}

export default Requests

1 ответ 1

2
<div>
    <div className="App">
        <Navbar />
        <Requests data={arrayOfRequests} /> <-- есть data
        <BrowserRouter>
          <Route exact path='/' component={Requests}/> <-- нет data
          <Route path='/Routes' component={Routes} />
          <Route path='/Contacts' component={Contacts} />
          <Route path='/PlacesToVisit' component={PlacesToVisit} />
        </BrowserRouter>
      </div>
 </div>

У вас Requests еще и в рутовом роутере находится, поэтому и отрисовывается два раза

Используйте расширение для браузера, что бы дебажить Реакт приложения было легче

2
  • Понял, спасибо,расширение установил. А как исправить можно? Ведь мне нужно роутер использовать в своём приложении.
    – user326541
    20 мая 2019 в 7:02
  • @ГригорийСысоев Так, у вас Requests будет отображаться на всех страницах, потому что он снаружи роутера, зачем вам он еще и внутри
    – ThisMan
    20 мая 2019 в 7:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.