Компонент только рендеринг, если я запускаю поток с домашней страницы

Question

У меня проблема с моей заявкой.Мой пользовательский компонент загружает UserCard только тогда, когда я запускаю приложение с домашней страницы, а затем нажимаю ссылку пользователя там ... если я просто обновляю URL-адрес пользователя ... UserCard не загружается, что означает, что что-то не так с моим this.props.users.Я вижу, что в chrome он говорит: Value below was evaluated just now когда я обновляюсь, но когда я прохожу через поток, это не говорит этого.Любая помощь будет оценена.

App.js

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            users: []
        };
    }

    componentDidMount() {
        users = []
        axios.get('/getall').then((res) => {
            for(var d in res.data) {
                users.push(new User(res.data[d]));
            }
        });
    this.setState({ users });
    }

    render() {
        const { users } = this.state;
        return (
            <Router history={history}>
                <Switch>
                    <PrivateRoute exact path="/" component={Home} />
                    <Route exact path='/users' render={(props) => <Users {...props} users={users} />}/>
                </Switch>
            </Router>
        )
    }
}

PrivateRoute:

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        <Component {...props} /> )} />
)

User.js

export default class Users extends Component {
    render() {
        console.log(this.props.users);
        return (
            <Row>
                {this.props.users.map(u =>
                        <UserCard key={u.name} user={u}/>
                )}
            </Row>
        );
    }
}

export class User {
    constructor(obj) {
        for (var prop in obj){
            this[prop] = obj[prop];
        }
    }

    getURLName() {
        return this.name.replace(/\s+/g, '-').toLowerCase();
    }
}

class UserCard extends Component {

    render() {
        return (
            <Link to={'/users/' + this.props.user.getURLName()} >
                <div>
                    // Stuff Here
                </div>
            </Link>
        );
    }
}

Answer 1

Согласно комментариям:

Проблема здесь в том, как вы устанавливаете состояние.Вы никогда не должны изменять состояние напрямую, так как это не приведет к повторному отображению компонента См. Документы реагирования

Некоторые дополнительные мысли, не связанные с вопросом:

• Согласнокомментарии - по возможности используйте компоненты функций, особенно с hooks на пути
• Вероятно, нет необходимости создавать User класс, только для new до маленьких пользовательских объектов.Просто используйте простые старые объекты JS и вычислите URL ссылки прямо в месте, где он используется:

---

render() {
  const { user } = this.props
  return <Link to={`/users/${user.name.replace(/\s+/g, '-').toLowerCase()}`} />
}

• Возможно, будет хорошей идеей начать использовать линтер, такой как eslint,Я вижу, что вы объявляете users = [] без использования let или const (не используйте var).Это плохая практика, поскольку создание переменных таким образом загрязняет глобальное пространство имен.Такие пометки, как eslint, помогут вам уловить подобные проблемы во время кодирования.