小编Dre*_*ese的帖子

我们有一个基于 fetchBaseQuery 的基本 RTK API Slice，就像RTK 文档中推荐的那样。

此外，还有一个后端服务将数据作为响应中的文本返回，但声明为Content-Type: application/json响应标头。我知道这不是一致的，但不幸的是，我们现在无权更改这一点。

我们尝试以正确的方式解析它，但我们无法获得任何有关数据的线索，我们在 RTK 中没有看到，甚至无法到达transformResponse. 当我们检查网络选项卡上的 XHR/Fetch 活动时，我们看到了预期的响应，这是我们成功接收数据的唯一线索。

我认为 RTK 不会处理此数据，因为它在响应标头上声明为 json，但在正文内以文本、字符串形式提供。这有点尴尬，因为我们在任何地方都没有看到任何错误。

您知道我们如何才能在 RTK 内部获得响应吗？

您好，我一直坚持使用 RTK 查询在一个功能组件中获取多个数据。如果您知道出路，请帮忙。多谢。

我的目标 我想通过 RTK 查询获取两个 api，都使用“GET”方法，基本 url 是相同的，唯一的区别是查询字符串。

我的问题是， 如果我只在函数组件中设置一个查询，则无法更改查询字符串，因为它将更改我从获取的数据中呈现的数据。

由于新的数据集为原始数据提供了信息。我不能将组件分成两部分。

我尝试 在 RTK 代码中的原始查询下方设置另一个查询，如下所示。

export const createIssueApi = createApi({
  reducerPath: "createLabelApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.github.com/repos",
  }),
  tagTypes: ["issues"],
  endpoints: (builder) => ({

...... original query above, new query I set below
getClosedIssues: builder.query<GetLebal[], Parameter>({
      query: ({ type, name, repo, query }) => ({
        url: `/${name}/${repo}/${type}${query}`,
        method: "GET",
        headers: new Headers({
          "Content-Type": "application/json",
          Authorization: `token ${process.env.REACT_APP_PASSWORD}`,
        }),
      }),
      providesTags: ["issues"],
    }),
  }),
});

然后我尝试在同一组件中使用此查询来获取 2 个 api，如下所示

 const …

不久，当我尝试在我的组件之一中将 useState 与 useContext 一起使用时，所有页面都消失了。UseState 出于某种原因阻止了我的路由器，我不知道为什么......你能告诉我我的错误在哪里吗？

下面的一些代码：Index.js

export default function App() {
  const [value, setValue] = useState(false)       -----> here I set the state
  return (
    <BrowserRouter>
      <UserContext.Provider value={{ value, setValue }}>
        <Routes>
          <Route path='/' element={<Layout />}>
            <Route index element={<Home />} />
            <Route path='Home' element={<Home />} />
            <Route path='Menu' element={<Menu />} />
            <Route path='Story' element={<Story />} />
            <Route path='Coffee' element={<Coffee />} />
            <Route path='Cart' element={<Cart />} />
          </Route>
        </Routes>
      </UserContext.Provider>
    </BrowserRouter>
  )
}

// ReactDOM.render(<App />, document.getElementById("root"))
const root = ReactDOM.createRoot(document.getElementById("root")) …

我正在使用反应和上下文：当我获取项目并且没有数据时，我发送 null。null 变为未定义（在 res.send 内）。在我的减速器中，当添加新项目时，我使用扩展运算符。这会导致错误，因为我试图传播未定义的内容（当还没有项目时，后来添加了第一个未定义的项目）。

什么是好的做法？在这种情况下我应该做什么来将 undefined 更改为空数组左右？谢谢

const initialState = {
  isFetchingItems: null,
  items: [],
  fetchErrorMessage: null
}
const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_ITEMS':
      return {
        ...state,
        isFetching: true
      }
    case 'FETCH_ITEMS_SUCCESS':
      return {
        ...state,
        items: action.payload.messages,
        isFetching: false
      }
    case 'FETCH_ITEMS_ERROR':
      return {
        ...state,
        fetchErrorMessage: action.payload,
        isFetching: false
      }
    case 'ADD_ITEMS_SUCCESS':
      return {
        ...state,
        items: [action.payload, ...state.items] // here the err comes from as its like [action.payload, ...undefined]
      }
    default:
      return state; …

我对此很陌生，当我使用 V6.4.3 时，我发现它更新为似乎使用加载程序进行身份验证，因此我尝试简化原始方法。但是当我使用 时useLoaderData()，我变得未定义。

索引.js

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
      <Route path="sign-in" element={<SignIn />} />    
      <Route path="/" element={<App />} errorElement={<LayoutError />}>
      <Route
        path="data"
        loader={() => { AuthProvider() }}
        element={<DataLayout />}
      />
      <Route path="about" element={<About />} />
      </Route>
    </>
));
ReactDOM.createRoot(document.getElementById('root'))
  .render(
    <ThemeProvider theme={theme}>
      <RouterProvider router={router} />
    </ThemeProvider>
  );

AuthProvider.js

export default function AuthProvider(){
  //{token: '4r8gjifendinsd'}
  const user = authService.getCurrentUser();
  //{"token":"asdasdasd"}
  console.log(JSON.stringify(user));
  if (!user.token) {
    throw redirect("/sign-in");
  }
  return user;
}

数据布局.js

export default function DataLayout() {
  const …

我正在尝试测试反应渲染。据我所知，有几种方法可以查找我定义的元素。

1. 角色
2. 测试编号
3. 班级名称
4. 查询选择器

我什么时候应该定义类名的“角色”或“测试ID”实例，角色和测试ID之间有什么区别？

以下是该网站工作示例的链接：https : //codesandbox.io/s/eloquent-kapitsa-kk1ls

我一直试图让粒子移动到屏幕的整个高度，但我无法让它们一直走到底部。我尝试改变不同<div>元素的高度并改变粒子的渲染方式，但没有成功。

我正在尝试创建一个带有删除按钮的购物清单，但是当我单击它时，其他项目将被删除，并且以前的值仍保留在屏幕上，即使第二次删除也是如此。请假设自定义按钮和图标已经是单独的包这是代码 -

import React, { useState } from 'react';
import { CButton, CDeleteButton } from '@custom/pkg';

const ShoppingList = () => {

    const [state, setState] = useState(
        [{ name: 'Apple', price: 60 }, { name: 'Banana', price: 20 }]
    )

    return (
        <>
            <h2>Product List</h2>
            {state.map(({name, price}, idx) => (
                <>
                    <div key={idx}>
                        <div>{name}</div>
                        <div>{price}</div>
                        <div>
                            <CButton id={idx} onClick={() => {
                                setState((prev) => [...prev.splice(idx, 1)])
                            }}>
                                <CDeleteButton/>
                            </CButton>
                        </div>
                    </div>
                </>
            ))}
        </>
    )
}

export default ShoppingList;

该组件被导入到模态组件中并进行渲染。如果我删除"Apple" …

我有一个基本的增量应用程序与以下代码反应。将函数传递到第一个按钮可以正常工作，但是将其传递到返回完全相同按钮的 handleClick子组件会出现错误： 。为什么它适用于第一个按钮，但不适用于子组件按钮，如何修复？提前致谢。IcrementButtonReact: Expected `onClick` listener to be a function, instead got a value of `object

import { useState } from "react";
import "./styles.css";

const IncrementButton = (handleClick) => {
  return (
    <button onClick={handleClick}>+</button>
  )
}

export default function App() {
  const [num, setNum] = useState(0)
  const handleClick = (e) => {
    e.preventDefault()
    console.log('clicked')
    setNum(prev => prev += 1)
  }
  return (
    <div className="App">
      <div>{num}</div>
      <button onClick={handleClick}>+</button>
      <IncrementButton handleClick={handleClick} />
    </div>
  );
}

我通过对象传递用户对象，useNavigation例如：

 let navigate = useNavigate();

    const showUser = (user: UserProp): void => {
        navigate('view', { state: user });
    }

一旦我登陆到该view组件，我就会尝试从该位置获取值。但出现错误。这是代码：

interface locationProps {
    state: { user: UserProp }
}

export default function UserView() {
    const { state } = useLocation<locationProps>();
    return (
        <h1>{state && state.user.name}</h1>
    )
}

出现错误为interface locationProps, Expected 0 type arguments, but got 1.