NodeJS jsxDEV(...)不是函数

kupeojn6 于 2023-02-08 发布在 Node.js

关注(0)|答案(3)|浏览(140)

我创建了一个react-redux项目，并使用json-server作为服务器。当我创建订单时，我将状态保存在UiReducer中的state中，并在"OrderStatusPage"中使用它。NODE_ENV设置为"development"。订单被添加到我的db.json中，但在"OrderStatusPage"中出现以下错误：
未捕获的类型错误：jsxDEV（...）不是函数
我怎样才能解决这个错误呢？2非常感谢。

import React from "react";
import { useSelector } from "react-redux";
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>
  );
};

node.js

来源：https://stackoverflow.com/questions/75361612/react-jsx-dev-runtime-webpack-imported-module-4-jsxdev-is-not-a-function

3条答案

按热度按时间

sd2nnvve1#

我想一切都很好。也许你只需要把你的两个条件分开就行了：

{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>
      )}

我想这会有用的。

赞(0）回复(0）举报 2023-02-08

nukf8bse2#

您不应直接更改状态。请尝试useState，例如：

import React from "react";
import { useSelector } from "react-redux";
export const OrderStatusPage = () => {
const [uistate, setUistate]=React.useState()
React.useEffect(()=>{
setUistate(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">
          {uistate &&
          (<Notification
            title={uistate.title}
            message={uistate.message}
            status={uistate.status}
          />)(uistate.status === "success") ? (
            <Button type="button" >
              Go to your Order
            </Button>
          ) : (
            <Button type="button" >
              Go to your Cart
            </Button>
          )} 
        </div>
      </div>
    </div>
  );
};

赞(0）回复(0）举报 2023-02-08

xghobddn3#

在代码中，您使用了Notification和Button组件，但没有导入这些组件。

import React from "react";
import { useSelector } from "react-redux";
import { Notification } from "./Notification";
import { Button } from "./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>
  );
};

赞(0）回复(0）举报 2023-02-08

我来回答

NodeJS jsxDEV(...)不是函数

3条答案

相关问题

热门标签

最新问答