React-Redux项目OrderStatusPage报jsxDEV不是函数错误如何解决？

AI 小北

2026-8-1

解决React中jsxDEV(...) is not a function错误

这个错误的核心原因是JSX条件渲染的语法结构错误，导致React编译后的元素被当作函数调用。

错误分析

你的代码中，notification && (<Notification ... />)(notification.status === "success") 这段逻辑存在语法问题：

(<Notification ... />) 会被React编译为jsxDEV调用，返回一个React元素对象
后面的(notification.status === "success") 试图将这个元素对象当作函数执行，而React元素并不是可调用的函数，因此抛出TypeError。

修正方案

调整条件渲染的结构，确保在notification &&之后是一个合法的React元素（或Fragment包裹的元素组），同时将按钮的判断逻辑与Notification组件的渲染分离：

import React from "react";
import { useSelector } from "react-redux";
// 确认导入Notification和Button组件
import Notification from './path/to/Notification';
import Button from './path/to/Button';

export const OrderStatusPage = () => {
  const notification = useSelector((state) => state.ui.notification);

  return (
    <div className="container">
      <div className="row d-flex justify-content-center">
        <div className="col-md-6 my-5 text-center">
          {notification && (
            <>
              <Notification
                title={notification.title}
                message={notification.message}
                status={notification.status}
              />
              {notification.status === "success" ? (
                <Button type="button">
                  Go to your Order
                </Button>
              ) : (
                <Button type="button">
                  Go to your Cart
                </Button>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
};