Программа заходит в обе ветви if

110
27 декабря 2020, 05:40

Учу реакт. Есть 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
Answer 1
<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 еще и в рутовом роутере находится, поэтому и отрисовывается два раза

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

READ ALSO
Резрешить путь к файлу без кавычек - Webpack

Резрешить путь к файлу без кавычек - Webpack

При сборке проекта (Vue-cli 3), ругается Webpack

109
Отправка изображений в теле текста React

Отправка изображений в теле текста React

Пытаюсь отправить данные из input и textarea из React на nodeВ качестве WYSIWYG использую ReactQuill

112
Подключение socket.io к клиентской части

Подключение socket.io к клиентской части

Имею следующий код сервера(работает нормально):

128