В первый раз использую реагирующий маршрутизатор, и я теряю реквизиты, переданные моему навигационному компоненту после рендеринга нового маршрута. Возможно, потеря реквизита - неправильный способ объяснить это. Какая проблема на домашней странице, когда я добавляю элементы в корзину, на обновлениях навигационных карт отображается правильное количество элементов, но когда я нажимаю кнопку "Оформить заказ", они исчезают. Когда я возвращаюсь домой, значок снова отображается правильно.
Я думаю, что должно быть что-то простое, потому что приложение работало, прежде чем я добавил маршрутизатор.
1. Домашние работы
2. Нет товаров в корзине:
- Компонент NavMain не добавлен в маршрут, потому что я хотел, чтобы он отображался как на странице оформления заказа, так и на домашней странице.
- между render() и кодом возврата подсчитывает количество товаров в корзине и передает номер в навигацию через реквизит, добавленный в состояние.
Я думаю, что я сделал что-то не так в приложении, чувствуя, что <.NavMain.../> должен быть в пути?
class App Extends React.Component {
render() {
/* counts number of items in cart does not add to state */
const arrayOfQuantities = this.state.cart.map(item => item.quantity);
const countOfCartItems = arrayOfQuantities.reduce(
(total, current) => (total += current)
);
return (
<BrowserRouter>
<div className="App">
/** Is this the problem? **/
<NavMain
countOfCartItems={countOfCartItems}
onTermSubmit={this.onTermSubmit}
handleSearched={this.handleSearched}
itemsInCartBoolean={this.state.cart.length > 1}
/>
<Route
exact
path="/"
render={() => (
<React.Fragment>
<MainCarousel />
<WatchList
cart={this.state.cart}
addCartItem={this.handleAddCartItem}
watchList={data.products[0].frankMuller}
/>
</React.Fragment>
)}
/>
<Route
path="/checkout"
render={() => <Checkout cart={this.state.cart} />} // used for pricing etc.
/>
</div>
</BrowserRouter>
);
}}
export default App;
Компонент Checkout ниже, я думаю, что я должен передать реквизит через это право? Это не компонент начальной загрузки Это мой компонент, который я импортировал для оформления заказа. Я постараюсь передать некоторые реквизиты. Постараюсь нажать несколько кнопок.
export default class Checkout extends Component {render() {
return (
<div>
<NavMain />
<h1 className="main-header">Checkout</h1>
<h5 className="sub-heading">YOUR ORDER</h5>
<OrderList
cart={this.props.cart}
addCartItem={this.props.addCartItem}
removeCartItem={this.props.removeCartItem}
/>
);}}
Syed знал, где искать проблему, - это компонент Checkout. Я добавил туда компонент NavMain, когда он уже был добавлен в корневое приложение. Я просто удалил его из Checkout и оставил root в покое.
работает сейчас ^^ спасибо