您没有正确使用 prop ，您忘记了{}：
function SubmitButton({formValid, isActive, handleSubmit, loading})

尝试在OnClick eventHandler中传递事件参数

onClick = {(e) => handleSubmit(e)}

问题是组件只接收一个名为props的参数，如果您试图对其进行反结构化，应该使用括号{}将prop值封装在SubmitButton中，如下所示

function SubmitButton({formValid, isActive, handleSubmit, loading}) {
   return ...
}

或者

function SubmitButton(props) {
   const { formValid, isActive, handleSubmit, loading } = props  

   return ...
}

您将props定义为SubmitButton的参数。但请记住，props是传递给react组件的单个参数。您需要像这样从props进行反结构：

function SubmitButton({ formValid, isActive, handleSubmit, loading }) {
    return (
        <button
            className={formValid ? `submit ${false ? 'active' : ' '}` : 'disable'}
            type="button"
            onClick={() => handleSubmit()}
            disabled={!formValid}
        >
            <span>Submit</span>
        </button>
    );
}

将其包含在onClick属性的值中，如下所示：

<SubmitButton
  loading={loading}
  formValid={errMessage.formValid}
  handleSubmit={handleSubmit}
/>

<button
  className={formValid ? `submit ${false ? "active" : " "}` : "disable"}
  type="button"
  onClick={handleSubmit}
  disabled={!formValid}
>
  <span>Submit</span>
</button>

你可以试着破坏这些 prop

function SubmitButton({formValid, isActive, handleSubmit, loading}) {
 
}