class App extends React.Component {
constructor(props) {
super(props)
this.state = {
data: [],
isLoading: false,
}
}
componentDidMount() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/data.json', true); // замените адрес
xhr.send();
this.setState({ isLoading: true })
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) {
return false
}
if (xhr.status !== 200) {
console.log(xhr.status + ': ' + xhr.statusText)
} else {
this.setState({
data: JSON.parse(xhr.responseText),
isLoading: false,
})
}
}
}
renderProducts() {
const { data, isLoading } = this.state
if (isLoading) {
return <img src='/i/preloader.gif' alt='загружаю...' /> // рисуем прелоадер
} else {
return data.map(item => {
// я здесь отрисываю все через другой компонент, вы же можете просто рисовать сразу верстку для начала
return <ProductCard key={item.id} name={item.name} price={item.price} quantity={item.quantity} />
})
}
}
render() {
return (
<div className='App'>
<div className='product-list'>
{this.renderProducts()}
</div>
</div>
)
}
}Как теперь сделать так чтобы в состоянии например в модуле users/people хранить всех пользователей которые зарегистрировались
const UserContainer = connect(
state => ({
default_role: state.customerProject.default_role,
show_role: state.customerProject.show_role,
roles_user: state.customerProject.roles_user
}),
dispatch => ({
anyName: () => dispatch(myActionCreator()) // и затем this.props.myNewActionCreator нужно передать в компонент-представление. Если нужно сделать доп-обработку, то передать метод из контейнера, в котором будет сначала обработка, а потом вызов this.props.myNewActionCreator
}))(AboutUser)
...
const changeRoleUser = () => {
this.props.anyName()
}
...onClick(showMapName) {
if (this.state[showMapName]) {
this.setState({ [showMapName]: false, [showMap1+'Value']:"Открыть карту"})
} else {
for (let key in this.state) {
let nextState = {}
if (key.indexOf('showMap') !== -1) {
nextState[key] = false // все showMap делаем false
}
nextState[showMapName] = true
nextState[showMapName+'Value'] = 'Закрыть карту'
}
this.setState(nextState)
}
}class App extends React.Component {
render() {
return (
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/signup' component={Registration} />
<Route component={NoMatch} /> {/* для всех остальных адресов */}
</Switch>
</div>
);
}
}<a> компонент из RR - <Link to='registration'>Регистрация</Link><Link to="/signup" className="btn btn-warning">Регистрация</Link>export const handleFilters = (type, val) => {
return (dispatch, getState) => {
switch (type) {
case "input":
dispatch({
type: FILTER_BY_INPUT,
payload: val
});
case "time":
...
}
}
};values.value - ожидаете, что errors.value = 'Please enter value'values.value === props.initialValues.value и ождаете, что будет errors.value = 'Please enter a new value'const validate = require('./validate');
const values = {} // то есть values.value - не существует
const props = {} // для первого теста на существование значения, нам не важно какие тут значения props
test('покажет ошибку, если нет значения', () => {
expect(validate(values, props)).toBe('Please enter value');
});this.getMouse = this.getMouse.bind(this)
export const logout = () => {
sessionStorage.removeItem('auth');
return {}; <-- забыли экшен свой { type: LOGOUT }
};<button data-myId='100' onClick={this.minus}>minus</button>minus = (e) => {
console.log(e.currentTarget.dataset.myId) // 100
}