小编kev*_*vin的帖子

我已经使用 Axios 成功编写了我的应用程序来获取内容。截至目前，它已设置为在发生某些事件时获取内容（例如单击提交按钮）。但是，我正在尝试Redux 的 RTK 查询解决方案。该包生成挂钩，并在其示例中提供了在挂载时调用挂钩的简单组件级示例。

我如何利用这些 rtk-hook（以及一般的钩子），以便将它们与 、 和条件事件等行为联系onClick起来onSubmit？我知道这与hooks 规则准则相冲突，但我无法想象 RTK-Query 会受到如此限制，只允许组件级 onMount API 调用。

当我试图解决这个问题/等待一个有用的例子时，我正在阅读一些相关文章：

• https://blog.logrocket.com/react-hooks-frustrations/
• https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks

第二篇文章似乎有些相关，但我觉得它偏离了道路太远，并且正在质疑它是否值得rtk-query安装。我不妨只使用它axios，因为它可以在我的组件和逻辑中的任何地方使用。有人可以教育我如何解决这个问题吗？我是 rtk-query 的新手，它看起来真的很酷，但它的实现方法似乎也确实受到限制。

这是我的切片的示例api.ts：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const apiEndpoint = 'http://localhost:5000';

export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: apiEndpoint }),
  endpoints: builder => ({
    getFileById: builder.query<any, { id: string; fileId: string }>({
      query: arg => { …

MUIv5.0.0今天发布，我正在尝试更新到新版本。我正在执行此处详细介绍的 mui 文档中的步骤。我正在使用styled-componentswith NextJS，似乎 mui 样式没有首先注入。我不确定我可以采取什么不同的措施来实现这一目标，据我所知，我一直在正确遵循该指南中的所有内容并逐步进行更改。然而，我仍然遇到特异性错误。

styled-component 的样式位于其他所有内容之下。

<StylesProvider injectFirst>现在似乎无法正常工作

想法？

_app.tsx

import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
import withDarkMode, { useDarkMode } from 'next-dark-mode';
import defaultTheme from 'src/theme';
import TopNavigation from '@components/_molecules/TopNavigation/TopNavigation';
import StyledTypography from '@components/_atoms/Typography/StyledTypography';
import { Provider } from 'react-redux';
import { StylesProvider } from '@mui/styles';

function MyApp({ Component, pageProps }): JSX.Element {

  // ? https://nextjs.org/docs/basic-features/layouts
  const getLayout = Component.getLayout || (page => page);

  return …

我一直在尝试将我的应用程序部署到 vercel 一段时间，并且已经阅读了大量关于 stackoverflow 的帖子，其中存在相同/类似的fsevents问题。尽管如此，我仍然收到下面发布的相同错误。

我尝试过的事情：

• 卸载node_modules& package-lock.json，然后运行：npm i -f
• 添加 "optionalDependencies": {"fsevents": "^2.3.2"}，然后npm i -f
• 没有安装fsevents在package.json
• ...以及许多其他尝试

我的部署中总是发生的事情的屏幕截图

我对整个 fsevents/chokidar 包的内容/原因不是很熟悉，但在我阅读完之后，我的 MacOS 似乎需要它，我真的很感激一些解决这个问题的想法。

当前包.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix ."
    ] …

我正在创建一个身份验证表单，并参考react-hook-form文档了解如何使用 yup 验证我的输入。据我所知，一切都与文档中提供的实现几乎相同。但是，我在解析器上收到错误useForm（如下所示）。知道我哪里出错了吗？

• "react-hook-form": "^7.15.2"
• "yup": "^0.32.9"
• "@hookform/resolvers": "^2.8.1"

错误

代码

interface IFormInputs {
  email: string;
  password: string;
  passwordConfirm: string;
}

const schema = yup.object().shape({
  email: yup.string().required(),
  password: yup.string().required(),
  passwordConfirm: yup.string().required(),
});

const SignUp = (): JSX.Element => {
  const {
    control,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm<IFormInputs>({ resolver: yupResolver(schema) });

  const onSubmit: SubmitHandler<IFormInputs> = () => {
    const values = getValues();
    console.log('values', values);
  };

  return (
    <div>
      <StyledPaper>
        <StyledTypography>Sign Up</StyledTypography>
        <form onSubmit={handleSubmit(onSubmit)}> …

我怎样才能记住我的rawTranscript变量，这样它就不会触发useEffect下面的函数，从而触发昂贵的transcriptParser函数？我一直在尝试很多不同的方法，但事实上，我使用 redux-hook ( useAppSelector) 从存储中捕获数据意味着我无法使用空依赖项 useEffect 进行初始安装（钩子不能位于内部）使用效果）。出于同样的原因，我似乎也无法用useAppSelector任何一个来包装。useMemo

关于如何记住变量rawTranscript以便它不会重新触发的任何想法useEffect？

useMemo在, ,useEffect中使用 redux-hook 时出错useCallback：

React Hook“useAppSelector”无法在回调内调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。

成分

const TranscriptCardController = (): JSX.Element => {
  const dispatch = useAppDispatch();
  // how to memoize rawTranscript?
  const rawTranscript = useAppSelector(selectRawTranscript);
  const parsedTranscript = useAppSelector(selectParsedTranscript);

  useEffect(() => {
    const parsedResult = transcriptParser(rawTranscript, undefined, 0.9);
    dispatch(updateParsedTranscript(parsedResult));
  }, [dispatch, rawTranscript]);

  // ... …

我正在尝试更新我的 React 应用程序以使用 MVVM 作为架构模式。我最初使用 Hooks 和 Redux 构建它。我发现我找到的每个资源都使用 MVVM 中的类。此外，我找不到任何使用 Redux 来管理状态的东西。我不断看到 MobX 出现，但我正在尝试使用 Redux，因为我已经让它工作并且更好地理解了它。

这是迄今为止我找到的最好的资源： https: //medium.cobeisfresh.com/level-up-your-react-architecture-with-mvvm-a471979e3f21，不过......它使用类和mobX。

MVVM架构（据我了解）

模型

保存状态，在我的示例中是 Redux。

视图模型

充当模型和视图控制器之间的中间人。它处理业务逻辑并具有更新模型的能力。

视图控制器

视图之上的层调用从模型派生的行为以响应用户操作。还更新要在视图上显示的数据。

看法

虚拟组件，仅显示通过 props 或其他方式传入的数据并进行相应渲染。

我尝试将下面的逻辑分解为类似于 MVVM 的逻辑，但我的努力没有成功。这个组件非常简单，它只是<useSelector />在钩子中从 Redux 读取 () 状态，并在 return 语句中吐出信息。第二个文件是第一个组件的输出出现在屏幕上的位置。

import React from 'react';
import styled from 'styled-components';
import { useSelector } from 'react-redux';
import Skeleton from 'react-loading-skeleton';
import styles, { H300, PSpan } from '../../../ui/styles/variables';
import ProfileImage from '../../ProfileImage/ProfileImage';
const { colors, borders, effects …

足够简单的问题： 我正在尝试创建与提供给它们的文本一样大的输入。

沙箱：https://codesandbox.io/s/long-snowflake-6u13n? file=/src/Test.jsx

我的设计意图是动态生成输入，然后允许用户具有特定于每个输入的样式，这些样式在视觉上有助于根据外部事件分解每个句子。但在我继续前进之前，输入容器的大小必须与其中的文本一样大，这一点非常重要。

为什么不使用文本区域？-- 我有每个句子特有的数据，我想为其创建独特的样式。

有什么想法吗？

从哪里来getDefaultMiddleware？我正在阅读文档，它似乎神奇地出现在配置存储中。虽然这很棒，但它没有进入我的商店，而且......由于这个功能没有导入路径，而且我不知道如何解决这个问题，我可以使用一些指导。

RTK版本："@reduxjs/toolkit": "^1.6.1",

太棒了；

getDefaultMiddleware()我的商店中不存在+我还没有在文档中找到任何与它相关的有用内容。

这是我得到的错误：

这是我的store.ts

import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { myApi } from './services/api';

import authorReducer from './slices/authorSlice';
import transcriptReducer from './slices/transcriptSlice';

export const store = configureStore({
  reducer: {
    [myApi.reducerPath]: myApi.reducer,
    middleware: (getDefaultMiddleware) =>
      // "This expression is not callable."
      getDefaultMiddleware().concat(myApi.middleware),
    author: authorReducer,
    transcript: transcriptReducer,
  },
});

setupListeners(store.dispatch);

// Infer the `RootState` and `AppDispatch` types from the store itself
export …

我正在使用 Redux 来管理组件的状态。虽然它适用于我的应用程序，但我无法让它在我的反应测试库测试套件中工作。

好消息是，这里Redux-RTK有设置他们的库的文档（示例如下）。坏消息是，我很难将其转换为，也很难做任何其他需要做的事情来使其在测试中实际工作。react-testing-library jsxtsx

// testing-utils.ts

import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
// Import your own reducer
import alertReducer from '../alertSlice'

function render(
 ui,
  {
    preloadedState,
    store = configureStore({
      reducer: { alert: alertReducer },
      preloadedState,
    }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children …