при переходе между ( кликнул в Navbar счетчик, отрисовался счетчик, потом обратно кликнул пользователи (Users) - отрисовались li'шки которые уже были отрисованы при первом рендеринге компоненты, а к ним прибавились ровно такие же li'шки еще раз Компонента Users постоянно добавляет один и тот же массив имен пользователей
Как этого избежать? я попытался написать проверочный код в методе componentDidMount компоненты Users, однако это не дало результата, так как ререндеринг происходит как я понял из за роутинга, что можно сделать?
App.js
class App extends React.Component {
render() {
return (
<BrowserRouter>
<div className={classTags.display}>
<Navbar />
<Route path="/Profile" render={() => <Profile />} />
<Route
path="/Counter"
render={() => (
<Form
counter={this.props.count}
increment={this.props.increment}
decrement={this.props.decrement}
history={this.props.history}
onDeleteItem={this.props.onDeleteItem}
deleteHistory={this.props.deleteHistory}
/>
)}
/>
<Route
path="/Chat"
render={() => (
<Chat
addMessage={this.props.addMessage}
messages={this.props.messages}
deleteMessage={this.props.deleteMessage}
/>
)}
/>
<Route
path="/Users"
render={() => (
<Users addUser={this.props.addUser} users={this.props.users} />
)}
/>
</div>
</BrowserRouter>
);
}
}
const mapStateToProps = state => {
return {
count: state.reducer.count,
history: state.reducer.history,
messages: state.chatReducer.messages,
users: state.usersReducer.users
};
};
const mapDispatchToProps = dispatch => {
return {
increment: () => dispatch({ type: "INCREMENT", value: 1 }),
decrement: () => dispatch({ type: "DECREMENT", value: 1 }),
onDeleteItem: id => dispatch({ type: "DELETE_ITEM", key: id }),
addMessage: value => dispatch({ type: "ADD_MESSAGE", value: value }),
deleteMessage: id => dispatch({ type: "DELETE_MESSAGE", key: id }),
deleteHistory: () => dispatch({ type: "DELETE_HISTORY" }),
addUser: person => dispatch({ type: "ADD_USER", person: person })
};
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
Users component (написано все в App.js для наглядности, то есть в отдельный файл я не выносил)
class Users extends React.Component {
state = {
isloaded: false
};
componentDidMount() {
axios
.get("https://social-network.samuraijs.com/api/1.0/users")
.then(response => {
debugger;
if (this.state.isloaded == false) {
this.props.addUser(response.data.items);
}
this.setState({
...this.state,
isloaded: true
});
});
}
render() {
return (
<div>
<ul>
{this.props.users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
}
users-reducer.js (обернут combine reducer'ом)
let initialState = {
users: []
};
export const usersReducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_USER":
return {
...state,
users: state.users.concat(action.person)
};
default:
return state;
}
};
