小编Dre*_*ese的帖子

如果状态为 false，我想渲染 0 到 3 个项目，如果状态为 true，则通过单击渲染 4 到数组长度的末尾See more

我有以下代码，但出现错误：

{items
                .filter((item) => DateTime.fromISO(item.date).year === lastYear)
                **.slice(showArticles ? (4, items.length) : (0, 3))**
                .map((filteredItem) => (
                        <div>
                            <date>{filteredItem.date}</date>
                            <span>{filteredItem.article}</div>
                        </div>

                ))}
            <button
                onClick={() => {
                    showArticles;
                }}
            >
                See more
            </button>

当前的切片条件正在实现，因此不会渲染任何内容。我怎样才能相应地展示我的物品？

我想在反应路由器 6 中，当没有插座时显示一个占位符。有什么办法吗？

<>
   <Grid item xs={12} sm={2} style={{backgroundColor: '#aaa'}}>
      <Button onClick={() => this.props.navigate('next')} variant='contained'>next</Button>
      <Button onClick={() => this.props.navigate(-1)} variant='contained'>back</Button>
   </Grid>
   <Outlet/>
</>

我需要帮助来解决这个错误：

“在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 useDispatch”。

解释：

store.js和userSlice.js保存了我的 Redux 相关事物（rtk）的定义。

Auth.js旨在保存身份验证/注销功能并保持 redux“用户”存储更新。现在我只有谷歌身份验证，当我调用redirectToGoogleSSO时，它会被验证。

身份验证部分工作完美，我正在正确检索用户信息，但我很难使其更新用户存储。调度（fetchAuthUser（））是我收到错误的地方。

Sidebar.js是一个导航侧边栏，它将包含一个用于登录/注销和访问 profile.js 的菜单（尚未实现）。如果我将 Auth 中的所有代码放入侧边栏组件中，身份验证工作和 redux 存储都会被填充，但我想将内容保留在 Auth.js 中，这样我就可以在其他组件中使用它，而不仅仅是在侧边栏中。

//store.js:

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

export default configureStore({
    reducer: {
        user: userReducer
    }
});

//userSlice.js

import { createSlice } from '@reduxjs/toolkit';
import axios from "axios";

export const userSlice = createSlice({
  name: 'user',
  initialState: { 
    email: 'teste@123',
    name: 'teste name',
    picture: 'teste pic',
    isAuthenticated: …

我已经setSearchParams在 Parent 组件中使用了 hook，它query根据inputJSX 元素的输入进行设置。现在，我需要实现第二个搜索参数 = sortBy，但不要删除已经存在的query搜索参数，或者可能是我每次执行 If() 检查时需要执行的现有搜索参数。而且我现在还需要 if() 检查父元素的参数sortBy。我可能会在不同的 React 组件中引入更多的搜索参数 - 这会让代码变得混乱。

有没有更好的方法来使用 React Router 6 处理分散在项目中的多个搜索参数？

import { useSearchParams } from 'react-router-dom';

const titles = ['Name', 'Sex', 'Born', 'Died', 'Father', 'Mother', 'Slug'];

export const TableHead = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query');

  return (
    <tr className="person">
      {
        titles.map(el => (
          <th
            key={el}
            onClick={() => {
              if (query) {
                setSearchParams({ …

我试图检查数组中的所有对象是否等于 false ，如果是，则在反应中返回 true 。我的对象数组如下所示

[{"filter":"ASIA","key":0,"isChecked":false},{"filter":"INDIA","key":1,"isChecked":false},{"filter":"MANDYA","key":2,"isChecked":false},{"filter":"GOA","key":3,"isChecked":false},{"filter":"KERALA","key":4,"isChecked":false}]

我尝试使用every和some来编写以下代码：

let check = arr.some(element => element.isChecked === false);

和

let check = arr.every(element => element.isChecked === false);

上述两个语句都返回 false

我们有一个基于 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 …