sina
2 سال پیش توسط sina مطرح شد
3 پاسخ

دریافت ارور هنگام dispatch کردن در ریداکس

با سلام بنده زمانی که می خوام UserAdded دیس پچ کنم با ارور زیر مواجه میشم در زیر کامپونت ها رو آوردم ، سناریو به این صورته که من در کامپونت list.js مشکلی ندارم(کامپونته مادر) و به درستی دیس پچ انجام میشه ، و مشکل زمانی ایجاد میشه که من در فایلuserslice می خوام متد prepare ریترن کنم

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

کامپونتت addUser لازم به ذکر که این کامپونت ، کامپونت فرزند list.js می باشد

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { UserAdded } from "../redax/reducers";

function AddUser() {
  const dispatch = useDispatch;
  const [user, setUser] = useState(null);
  const [email, setEmail] = useState(null);

  const handelName = (e) => setUser(e.target.value);
  const handelٍEmail = (e) => setEmail(e.target.value);
  const handelSubmit = (e) => {
    e.preventDefault();
    dispatch(UserAdded(user));
  };

  return (
    <div>
      <form>
        <input
          type="text"
          placeholder="یوزر"
          onChange={handelName}
        />
        <input
          type="text"
          placeholder="ایمیل"
          onChange={handelٍEmail}
        />
        <button onClick={handelSubmit}>submit</button>
      </form>
    </div>
  );
}

export default AddUser;

کامپونته list.js
در اینجا dispatch به راحتی اجرا میشه (کامپونته مادر AddUser)

import "./list.scss";

import Layout from "../../components/layout/Layout";
import { UserAdded } from "../../redax/reducers/index";
import { selectAllUsers } from "../../redax/reducers/index";
import { useSelector, useDispatch } from "react-redux";
import AddUser from "../AddUser";

const List = () => {
  const user = useSelector(selectAllUsers);
  console.log(user);
  return (
    <Layout>
      <div className="card">
        <div className="card-body form-card"></div>

        <AddUser />

        {user.map((item) => {
          return <p>{item.name}</p>;
        })}
      </div>
    </Layout>
  );
};

export default List;

userSlice.js
حالا برای دی باگ کردنش برنامه تا زمانه preper شدن خو ب کار میکنه یعنی خط بیست اجرا میشه ولی خط 17 به ارو رذکر شده میخورم


import { createSlice, nanoid } from "@reduxjs/toolkit";

const initialState = [
  { id: "0", name: "Dude Lebowski" },
  { id: "1", name: "Neil Young" },
  { id: "2", name: "Dave Gray" },
];

const usersSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    UserAdded: {
      reducer(state, action) {
        // state.push(action.payload);
        console.log(action.payload);
      },
      prepare(user) {
        console.log(user);
        return { payload: { user } };
      },
    },
  },
});

export const { UserAdded } = usersSlice.actions;
export const selectAllUsers = (state) => state.users;

export default usersSlice.reducer;

ممنون میشم راهنمایی کنید


ثبت پرسش جدید
T Game
@TGame 2 سال پیش آپدیت شد
0

سلام دوست عزیز
ارور میگه به درستی از hook استفاده نکردی
تو کامپوننت adduser اون قسمتی که از هوک useDispatch استفاده کردی مشکل داره
و باید به صورت function باشه

const disptach = useDispatch()

sina
@sinkoosha 2 سال پیش مطرح شد
0

@TGame چه اشتباهه بدی😐 ، جالب تا مرحله prepare دن درست کار میکرد


محمد زورمند
تخصص : react developer
@SpyStar0003 2 سال پیش مطرح شد
0

سلام
تا اون مرحله خوب کار می‌کرده چون catch رو خالی نکرده بودی توی پروژه ها از catch و خالی کردنش غافل نشید !

من خودم خیلی قربانی این catch لامصب شدم تا حالا😥😥😥


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام