Компонента постоянно добавляет массив при роутинге?

Question

[chatterbox777]

при переходе между ( кликнул в 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;
  }
};

Answer 1

[Wondermarin]

componentDidMount() {
  if (this.props.users.length === 0) {
    // запрос к api
  }
}

Comments

[chatterbox777]

componentDidMount() {
axios
.get("https://social-network.samuraijs.com/api/1.0/users")
.then(response => {
debugger;
if (this.props.users.length === 0) {
this.props.addUser(response.data.items);
}
});
}

вот так заработало, типо пока у нас в редьюсере users.length === 0 , мы диспатчим..... верно я понял?)) спасибо!

[Wondermarin]

chatterbox777, да, но зачем вы проверяете только после получения ответа? Так вы зря нагружаете сервер.

[chatterbox777]

Wondermarin, мммм понял, щас исправим)