Question

我有一个登录组件，该组件具有用于登录的电子邮件和密码。成功后，我使用this.props.history.push（'/ userComponent）路由另一个组件。在将其路由到的组件上，应显示人员/用户的名称。我试图作为道具发送，但由于未呈现用户组件（将其路由到的组件），最终导致未定义。请检查以下内容。

export default class Login extends Component {
constructor(props) {
    super(props);
    this.x = '';
}

onSubmit = () => {
    fetch('http://localhost:5000/api/account/')
        .then(res => res.json())
        .then(data => {
            for (let index = 0; index < data.length; index++) {
                if (userName === data[index].email && passWord === data[index].password && data[index].role === "Admin") {
                    console.log("login is successful");
                    this.x = true;
                    console.log('.......state after update: ' + this.x);
                    this.props.history.push('/userA');
                    return (
                        <div>
                            <UserA somePropName={data[index].userName} />
                        </div>
                    );
                }

                else if (userName === data[index].email && passWord === data[index].password) {
                    console.log("login is successful");
                    this.x = false;
                    console.log("x....... " + this.x);
                    this.props.history.push('/userB');
                    return (
                        <UserB somePropName={data[index].userName} />
                    );
                }
                else {
                    this.props.history.push('/errorPage');
                }
            }
        });
}

render() {
    return (
        <div>
            <div class="container">
                <label for="uname"><b>Username</b></label>
                <input type="text" placeholder="Enter Username" name="uname" required />

                <label for="psw"><b>Password</b></label>
                <input type="password" placeholder="Enter Password" name="psw" required />

                <button type="submit" onClick={this.onSubmit}>Login </button>
                <label>
                    <input type="checkbox" checked="checked" name="remember" /> Remember me
    </label>
            </div>

            <div class="container" style="background-color:#f1f1f1">
                <button type="button" class="cancelbtn">Cancel</button>
                <span class="psw">Forgot <a href="#">password?</a></span>
            </div>
        </div>
    );
}

}

Answer 1

导航时将属性传递给其他组件的方式

this.props.history.push({
  pathname: '/userB',
  state: { title: 'Hello world' }
})

使用链接

<Link to={{
      pathname: '/userB',
      state: { title: 'Hello...' }
    }}>Click</Link>

在导航的组件中像这样访问

this.props.location.state.title

Answer 2

您应该在render（）中有条件地渲染UserA或UserB。将用户相关字段置于状态中。像

render() {
return (
    <div>
        <div class="container">
            <label for="uname"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" required />
            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required />

            <button type="submit" onClick={this.onSubmit}>Login </button>
            <label>
                <input type="checkbox" checked="checked" name="remember" /> Remember me
</label>
        </div>

        <div class="container" style="background-color:#f1f1f1">
            <button type="button" class="cancelbtn">Cancel</button>
            <span class="psw">Forgot <a href="#">password?</a></span>
        </div>
      {this.state.isLoggedIn && this.state.isAdmin && <UserA somePropName={this.state.userName} />}
      {this.state.isLoggedIn && !this.state.isAdmin && <UserB somePropName={this.state.userName} />}
 </div>);
}

对于onSubmit函数

onSubmit = () => {
    fetch('http://localhost:5000/api/account/')
        .then(res => res.json())
        .then(data => {
            this.props.history.push('/xxx');
            this.setState({
              isAdmin: data[index].role === "Admin"
              isLoggedIn: userName === data[index].email && passWord === data[index].password,
              userName: data[index].userName
            })
         })
}

如何在反应中通过history.push（）传递道具？

2 个答案: