React_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV(...) не является функцией

Я создал проект react-redux и использовал json-server в качестве сервера. когда я создаю заказ, я сохраняю статус в UiReducer и использую его в «OrderStatusPage». NODE_ENV установлен на «развитие». Заказ добавлен в мой db.json, но я получил эту ошибку в «OrderStatusPage»:

Uncaught TypeError: react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV(...) не является функцией

как я могу решить эту ошибку? Большое спасибо.

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

javascript node.js reactjs react-redux

06.02.2023 13:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

173

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы не должны изменять состояние напрямую. Попробуйте использовать состояние, например:

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

Я знаю это, и я управляю своим состоянием с помощью redux, а не с помощью useState.

— 07.02.2023 07:29

07.02.2023 07:14

Ответ принят как подходящий

Я думаю, все в порядке. Возможно, вам просто нужно разделить два условия, которые у вас есть:

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

Я думаю, это сработает.

Спасибо, это работает, и у меня есть еще одна проблема в uiReducer, и я ее решаю. Наконец-то теперь все в порядке.

— 07.02.2023 14:33

Я рад это слышать ^-^

— 07.02.2023 19:54

07.02.2023 09:21

в вашем коде вы используете компоненты 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>
  );
};

Спасибо за ваш ответ, но я просто удалил их в stackoverflow, чтобы уменьшить количество строк кода.

— 07.02.2023 12:56

07.02.2023 10:13