Question

在我的主页组件中，我读了一个用户名，然后检查它是否有效（如果名称正确，axios会返回一个用户）。如果它有效，我单击按钮，我想显示仪表板组件。问题是，即使名称有效，仪表板也不会从主页组件接收道具。我尝试使用componentDidUpdate，但效果不佳。我不明白为什么如果我键入一个正确的用户，我的仪表板会被渲染，但它没有得到道具？

这是我的Home组件，没有构造函数：

inputChange(event) {
    this.setState({username:event.target.value});
}

login() {
    this.setState({clicked: true})
    UsersService.validUser(this.state.username).then((user) => {
        this.setState({valid: true, user: user})
    });
}

change() {
    this.setState({clicked: false})
}

render() {
    if(this.state.clicked) {
        if (this.state.valid)
            return (
                <Redirect to={{ pathname: '/dashboard', state: { user: this.state.user } }}/>
            )
        else
            this.change;
    }
    return (
        <div>
            <input onChange={this.inputChange.bind(this)}/>
            <button onClick={this.login}>LOGIN</button>
        </div>
}

信息中心组件

export interface DashboardProps {
    user: IUser
}

interface DashboardState {
}

class Dashboard extends React.Component<DashboardProps, DashboardState> {
    public static defaultProps: DashboardProps = {
        user: {
            userId: '',
            name: '',
            phone: '',
            email: '',
            age: '',
            tag: []
        }
    }
    constructor(props: DashboardProps) {
        super(props);

        this.state = {
        };
    }

    render() {
        return (
            <div>
                <Header user={this.props.user}/>
                <div>
                    <span>Hi, {this.props.user.name}</span> <br/>
                </div>
            </div>
        );
    }
}

export default withRouter(Dashboard);

Answer 1

尝试在信息中心组件中使用withRouter HOC react-router，将当前路由道具注入组件。

export default withRouter(Dashboard);

编辑：

您的州信息将在this.props.location.state.user处提供。

组件不接收道具

1 个答案: