Javascript 仅当我从主页启动流时才进行组件渲染

我的申请有问题。我的用户组件仅在我从主页启动应用程序，然后单击此处的用户链接时加载UserCard。。。如果我只是刷新用户的URL。。。用户卡未加载，这意味着我的

this.props.users

有问题。我确实看到，在chrome中，它说：

下面的值刚才在我刷新时被计算过，但当我通过流程时，它没有这样说。任何帮助都将不胜感激

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>
        )
    }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：[]
};
}
componentDidMount（）{
用户=[]
axios.get（'/getall'）。然后（（res）=>{
for（资源数据中的var d）{
push（新用户（res.data[d]）；
}
});
this.setState（{users}）；
}
render（）{
const{users}=this.state；
返回(
}/>
)
}
}

专用路线：

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

export const PrivateRoute=（{component:component，…rest}）=>(
(
)} />
)

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>
        );
    }
}

导出默认类用户扩展组件{
render（）{
console.log（this.props.users）；
返回(
{this.props.users.map（u=>
)}
);
}
}
导出类用户{
建造师（obj）{
用于（obj中的var prop）{
此[prop]=obj[prop]；
}
}
getURLName（）{
返回此.name.replace（/\s+/g，'-'）.toLowerCase（）；
}
}
类UserCard扩展组件{
render（）{
返回(
//这里的东西
);
}
}
根据注释：

这里的问题是如何设置状态。您不应该直接修改状态，因为这不会导致组件重新加载

与问题无关的其他一些想法：


根据注释-尽可能使用功能组件，尤其是在途中
可能不需要创建
User
类，只需创建
new
小用户对象即可。只需使用普通的旧JS对象，并在其使用的位置计算链接url：


render（）{
const{user}=this.props
回来
}


开始使用诸如eslint之类的linter可能是个好主意。我看到您在声明
users=[]
时没有使用
let
或
const
（不要使用
var
）。这是一种糟糕的做法，因为以这种方式创建变量会污染全局名称空间。像eslint这样的linter将帮助您在编码时捕捉到类似这样的问题
您正在修改
此。直接在
componentDidMount
中声明。您应该使用
this.setState
。（这可能就是您的问题所在）。可能不相关，但您也向
用户提供
属性，然后在
用户卡中引用
this.props.users.getURLName（）
（应该不是
this.props.user.getURLName（））
？这可能只是问题中的一个输入错误，因为在运行应用程序时会很快出错。）@StuartBourhill第二点是一个输入错误。我也使用这个.setState，但结果相同。用户卡不会在页面刷新时被调用，只有当我通过整个流程更新了相关代码以反映它时，这里有一些非常粗略的东西。只能使用this.setState修改状态。如果必须这样做，
让x=this.state.x；dothingsto（x）；this.setState（{x}）。另外，不要大规模地重新绑定
this[prop]=obj[prop]
，你所有的代码都在说“我没有正确地编写我的用户类，使调试变得异常困难，因为我不知道哪些函数和属性应该是可调用的”。最后，您可能希望将UserCare转换为一个
函数（props）{return；}
，而不是一个类，因为您不以任何方式依赖于其中的状态。您是否也可以显示主路由和用户路由的相关react路由器位？因为这些决定了运行什么。功能组件的优势是什么？
render() {
  const { user } = this.props
  return <Link to={`/users/${user.name.replace(/\s+/g, '-').toLowerCase()}`} />
}