Задать вопрос
Ответы пользователя по тегу React
  • Как исправить ошибку "Module build failed" для module scss в React Ts проекте?

    @5465
    Ошибка "Module build failed" означает, что Webpack не смог скомпилировать ваш модуль SCSS в CSS. В этой конкретной ошибке проблема заключается в том, что свойство 'modules' указано в конфигурации загрузчика 'style-loader', но оно не поддерживается.

    Чтобы исправить эту ошибку, вам нужно удалить свойство 'modules' из конфигурации загрузчика 'style-loader'. Также вам не нужно указывать свойство 'modules' для загрузчиков 'css-loader' и 'sass-loader', потому что вы уже используете плагин 'typed-scss-modules' для генерации типизированных модулей SCSS.

    Измените ваш конфигурационный файл webpack.config.js следующим образом:

    {
      test: /\.s[ac]ss$/i,
      use: [
        {
          loader: 'style-loader',
          options: {
            sourceMap: true,
          },
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: true,
            modules: {
              exportLocalsConvention: 'camelCase',
            },
          },
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              parser: 'postcss-js',
            },
            execute: true,
          },
        },
      ],
    },


    Вы также можете изменить свойство 'exportLocalsConvention' на 'asIs', если вы хотите сохранить имена классов CSS без изменений.

    После этого перезапустите сборку вашего проекта и должно все заработать.
    Ответ написан
    Комментировать
  • Почему стек вызовов переполнен?

    @5465
    Проблема возникает из-за рекурсивной функции, которая вызывает себя слишком много раз, что приводит к переполнению стека вызовов.

    В вашем коде рекурсия находится внутри функции getCommentsChildren. В этой функции вы вызываете функцию recursFunc для каждого элемента массива children, который, вероятно, является частью объекта data, полученного из api. Однако вы передаете неправильный аргумент в рекурсивный вызов recursFunc, используя переменную children вместо comments. Это приводит к бесконечному циклу, который приводит к переполнению стека вызовов.

    Чтобы исправить проблему, вы можете передавать правильный аргумент в рекурсивный вызов recursFunc, используя переменную comments вместо children. Также вам следует добавить условие выхода из рекурсии, чтобы она не продолжалась бесконечно.

    Исправленный код функции getCommentsChildren должен выглядеть примерно так:

    async getCommentsChildren(kids: number[], id: number, children: IComment[]) {
        const data: IComment[] = [];
        if (kids === undefined) return;
        for (const item of kids) {
          const response = await api.get<IComment>(
            `https://hacker-news.firebaseio.com/v0/item/${item}.json`
          );
          data.push(response);
        }
        const recursFunc = (comments: IComment[]) => {
          if (!comments) return;
          for (let i = 0; i < comments.length; i++) {
            comments[i].children = data;
            if (comments[i].kids.length) {
              recursFunc(comments[i].children);
            }
          }
          return comments;
        };
        runInAction(() => {
          this.comments = recursFunc(children);
        });
      }


    Также, обратите внимание на то, что в компоненте RecursiveComponent вы используете data.map, даже если data не является массивом. Это может вызвать ошибку во время выполнения. Вы можете добавить проверку на массив перед использованием map:

    const RecursiveComponent: FC<IRecursiveProps> = observer(({ data, getChildren }) => {
      if (!Array.isArray(data)) {
        return null; // or any fallback component or message
      }
    
      return (
        <div>
          {data.map((parent: any) => {
            return <Comment parent={parent} getChildren={getChildren} data={data} />;
          })}
        </div>
      );
    });


    Надеюсь, это поможет вам решить проблему!
    Ответ написан
    Комментировать
  • Почему в webpack module federation, при добавлении get параметра в url состояние redux сбрасывается?

    @5465
    Проблема может быть связана с тем, что при добавлении get параметра в URL компонент Dashboard перерендеривается и создается новый экземпляр Redux store для этого компонента, который не содержит сохраненных данных.

    Для решения этой проблемы необходимо сохранять состояние Redux store вне компонента и передавать его внутрь компонента при каждом рендере. Для этого можно использовать React Context API.

    В главном приложении создайте контекст:

    // appContext.js
    import React from 'react';
    
    export const AppContext = React.createContext({});


    В главном приложении оберните ваш компонент в провайдер контекста и передайте в контекст текущее состояние Redux store:

    // App.js
    import { AppContext } from './appContext';
    
    function App() {
      const [store, setStore] = useState(initialState); // начальное состояние Redux store
    
      return (
        <AppContext.Provider value={{ store, setStore }}>
          <Routes>
            <Route path='items' element={<Items />} />
          </Routes>
        </AppContext.Provider>
      );
    }


    В компоненте Dashboard микрофронта, вы можете получить текущее состояние Redux store через контекст и использовать его для отображения данных:

    // Dashboard.js
    import React, { useContext } from 'react';
    import { useSearchParams } from 'react-router-dom';
    import { AppContext } from '../appContext';
    
    function Dashboard() {
      const { store } = useContext(AppContext);
      const [searchParams] = useSearchParams();
    
      // получаем данные из текущего состояния Redux store
      const items = store.items;
    
      // обновляем данные в Redux store, если это необходимо
      if (searchParams.get('update')) {
        const newItems = await fetchItems(); // получаем новые данные
        setStore(prevState => ({ ...prevState, items: newItems })); // обновляем состояние Redux store
      }
    
      return (
        <div>
          {items.map(item => (
            <div key={item.id}>{item.name}</div>
          ))}
        </div>
      );
    }


    Теперь, когда вы добавляете параметр update в URL, компонент Dashboard не будет перерендериваться и состояние Redux store не будет сбрасываться, потому что вы сохраняете его в контексте.
    Ответ написан
    1 комментарий