ReactJS - 如何根据服务器响应处理给用户的通知？

Question

所以我一直在想办法

如何处理一些通知/警报以根据用户输入的内容向用户显示一些信息，例如登录表单 .

const DoLogin = async (email, password) => {
  const loginTeacher = await axios.post(
    "http://localhost:3000/teachers/login",
    {
      email,
      password
    }
  );
  return loginTeacher;
};

class Login extends React.Component {
  state = {
    email: "",
    password: "",
    logged: false,
    status: "",
    errorMessage: ""
  };

  onEmailChange = e => {
    this.setState({
      email: e.target.value
    });
  };

  onPassChange = e => {
    this.setState({
      password: e.target.value
    });
  };

  onSubmit = e => {
    e.preventDefault();
    DoLogin(this.state.email, this.state.password)
      .then(res => {
        localStorage.setItem("mysecrettoken", res.data.token);
        this.setState({ teacher: res.data, logged: true, status: res.status });
        alert("Successfully logged in");
      })
      .catch(err => {
        alert("Unable to login in, user not found");
      });
  };

  loginForm() {
    return (
      <div className="Login form">
        <form onSubmit={this.onSubmit}>
          <label htmlFor="email">
            Email:
            <input
              type="text"
              name="email"
              value={this.state.email}
              onChange={this.onEmailChange}
            />
          </label>
          <br />
          <label htmlFor="password">
            Hasło:
            <input
              type="password"
              name="password"
              value={this.state.password}
              onChange={this.onPassChange}
            />
          </label>
          <br />
          <input type="submit" value="Zaloguj" />
          <input type="button" value="Dodaj nauczyciela" />
        </form>
      </div>
    );
  }
}

现在，只要用户能够登录，它就会显示带有消息的警报，但我认为这不是显示用户信息的好方法。

你能帮我解决这个问题吗？一些文章/图书馆会很棒。我试过实现 react toast但我没能做到。

Answer 1

您可以将详细信息存储在状态中(就像您已经做的那样)，然后在用户登录时访问渲染方法以进行条件渲染。

const DoLogin = async (email, password) => {
  const loginTeacher = await axios.post(
    "http://localhost:3000/teachers/login",
    {
      email,
      password
    }
  );
  return loginTeacher;
};

class Login extends React.Component {
  state = {
    email: "",
    password: "",
    logged: false,
    status: "",
    errorMessage: ""
  };

  onEmailChange = e => {
    this.setState({
      email: e.target.value
    });
  };

  onPassChange = e => {
    this.setState({
      password: e.target.value
    });
  };

  onSubmit = e => {
    e.preventDefault();
    DoLogin(this.state.email, this.state.password)
      .then(res => {
        localStorage.setItem("mysecrettoken", res.data.token);
        this.setState({ teacher: res.data, logged: true, status: res.status, showingMessage: true });
        setTimeout(() => { 
           this.setState({ showingMessage: false })
        }, 2000)
        alert("Successfully logged in");
      })
      .catch(err => {
        // update state with ERROR
        this.setState({ error: err.message })
        alert("Unable to login in, user not found");
      });
  };

  loginForm() {
    if (this.state.logged && this.state.showingMessage) {
      return (<div>You've logged in as {this.state.teacher.name}</div>)
    }
    return (
      <div className="Login form">
        {/* display ERROR */}
        {this.state.error && <span style="color:red">
          There was an error during registration: {this.state.error}.
        </span>}
        <form onSubmit={this.onSubmit}>
          <label htmlFor="email">
            Email:
            <input
              type="text"
              name="email"
              value={this.state.email}
              onChange={this.onEmailChange}
            />
          </label>
          <br />
          <label htmlFor="password">
            Hasło:
            <input
              type="password"
              name="password"
              value={this.state.password}
              onChange={this.onPassChange}
            />
          </label>
          <br />
          <input type="submit" value="Zaloguj" />
          <input type="button" value="Dodaj nauczyciela" />
        </form>
      </div>
    );
  }
}

我不知道你的渲染方法在哪里，但基本上只是访问状态。您还可以在收到数据后设置超时，并在状态上添加另一个属性，例如 showingMessage一开始是真的，然后说 2s 是假的，那么你的条件是 if (this.state.logged & this.state.showingMessage) .