Учу реакт. Есть 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
<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
еще и в рутовом роутере находится, поэтому и отрисовывается два раза
Используйте расширение для браузера, что бы дебажить Реакт приложения было легче
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Пытаюсь отправить данные из input и textarea из React на nodeВ качестве WYSIWYG использую ReactQuill