如何在MUI Typography组件中渲染React状态中的错误信息？

核心问题很简单，你只需要直接把error状态变量插入到Typography组件中即可，同时要注意把错误判断逻辑放到表单提交的处理函数里（避免组件渲染时反复触发setState导致无限重渲染）。

步骤1：修正错误判断的位置 #

不要在组件顶层直接写if判断，把这些逻辑放到表单提交的处理函数中，比如：

const [error, setError] = useState('');
const [submitted, setSubmitted] = useState(false);

// 表单提交处理函数
const handleSubmit = (e) => {
  e.preventDefault();
  // 重置之前的错误信息
  setError('');

  if (email === '' || password === '') {
    setError('Sign in attempt failed');
    setSubmitted(false);
  } else if (!verifyPassword.test(password) || !validated) {
    setError('Please complete all fields to log in');
    setSubmitted(false);
  } else {
    // 验证通过的逻辑，比如提交表单
    setSubmitted(true);
  }
};

步骤2：在Typography中渲染错误信息 #

直接在你写的errorMessage函数组件里，把{error}放到Typography标签内即可，还可以优化显示逻辑，用条件渲染替代style控制：

const errorMessage = () => {
  // 如果error为空，直接返回null不渲染
  if (!error) return null;

  return (
    <div className="error">
      <Typography variant="h6" sx={{ m: 1 }} color="red">
        {error}
      </Typography>
    </div>
  );
};

步骤3：在表单中调用这个错误信息组件 #

在表单的底部（比如提交按钮下方）调用{errorMessage()}或者直接把这段逻辑内联到JSX中：

<form onSubmit={handleSubmit}>
  {/* 表单输入框等内容 */}
  <button type="submit">Sign In</button>
  {errorMessage()}
</form>

这样当用户提交表单且验证不通过时，error状态会被设置为对应的文本，Typography就会自动渲染出错误信息，验证通过时则不会显示。

内容的提问来源于stack exchange，提问作者CheckDeck