ReactDOM.render((
<Provider store={store}>
<Router>
<Main />
</Router>
</Provider>
), document.getElementById('root'));'/'. Если это так, то замените на '*'.
renderSourceList = useMemo(() => {
if (newSources.length) {
// ...
}
return (
// ...
);
});
const ConnectedContainer = connect(mapStateToProps, mapDispatchToProps)(Container);
ReactDOM.render(
<Provider store={store}>
<ConnectedContainer />
</Provider>,
document.getElementById("params"),
);{isFetching ? <Preloader /> : this.renderContent()}{isReady ? this.renderContent() : <Preloader />}'category-key-' - бессмысленно.catItem['category_name'] так же выглядят странно.const mapDispatchToProps = dispatch => ({
setProducts: products => dispatch(setProducts(products)),
setFilter: filter => dispatch(setFilter(filter)),
});const mapDispatchToProps = {
setProducts,
setFilter,
};Но почему-то, при загрузке компонента Artobjects, первым из actions вызывается getArtObjects, а потом уже loadUser. Из-за этого, action getArtObjects не может получить данные о юзера из глобального стейта, тк. появляются они позже.
const store = configureStore();
store.dispatch(clientInit()); // тут
const Root = () => (
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>
);{isInitialDataFetching ? <Preloader /> : this.renderContent()}Что в данном примере я сделал не правильно?
import React, { useState } from "react";
const initialState = [
{ id: 1, name: 'Moscow' },
{ id: 2, name: 'Kazan' },
{ id: 3, name: 'Sochi' },
{ id: 4, name: 'Ekaterinburg' },
];
const App = () => {
const [ cities, setCities ] = useState(initialState);
const handler = () => {
setCities(prevState => [...prevState, { id: 5, name: 'Saint-Petersburg' }]);
};
return (
<div>
<button onClick={handler}>Click Me</button>
<ul>
{cities.map(city => <li key={city.id}>{city.name}</li>)}
</ul>
</div>
);
};
export default App;function outer() {
return new Promise(resolve => {
$.post('/some/url', {...}, (data, textStatus, jqXHR) => resolve(jqXHR.responseText));
});
}
(async () => {
const x = await outer();
})();import { setFilter } from "../actions/filter";
- SAP - это такая себе, специфическая тема (ну, как я ее вижу) - делать сайт (речь идет именно о сайтостроении) как SAP - далеко не всегда оправданно. В том числе, и исходя из стоимости разработки и поддержки.
class Menu extends Component {
state = { isActive: false };
wrapper = React.createRef();
componentWillUnmount() {
this.removeOutsideClickListener();
}
addOutsideClickListener() {
document.addEventListener('click', this.handleDocumentClick);
}
removeOutsideClickListener() {
document.removeEventListener('click', this.handleDocumentClick);
}
onShow() {
this.addOutsideClickListener();
}
onHide() {
this.removeOutsideClickListender();
}
onClickOutside() {
this.setState({ isActive: false });
}
handleDocumentClick = e => {
if (this.wrapper.current && !this.wrapper.current.contains(e.target)) {
this.onClickOutside();
}
};
toggleMenu = () => {
this.setState(
prevState => ({ isActive: !prevState.isActive }),
() => {
this.state.isActive ? this.onShow() : this.onHide();
},
);
};
render() {
const { isActive } = this.state;
return(
<div ref={this.wrapper}>
<button onClick={this.toggleMenu}>MENU</button>
{isActive && (
<ul>
<li>qwe</li>
<li>asd</li>
<li>zxc</li>
</ul>
)}
</div>
)
}
}