با سلام بنده زمانی که می خوام 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;
ممنون میشم راهنمایی کنید
سلام دوست عزیز
ارور میگه به درستی از hook استفاده نکردی
تو کامپوننت adduser اون قسمتی که از هوک useDispatch استفاده کردی مشکل داره
و باید به صورت function باشه
const disptach = useDispatch()
سلام
تا اون مرحله خوب کار میکرده چون catch رو خالی نکرده بودی توی پروژه ها از catch و خالی کردنش غافل نشید !
من خودم خیلی قربانی این catch لامصب شدم تا حالا😥😥😥
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟