使用的语言:JS带有REACT-REDUX TOOLKIT(在本例中为React钩子形式)
以下是上下文:我有一个表单,当用户更改某项内容时,我会使用redux-toolkit获取更改
我的问题是:在react hook表单中,你可以使用register来更新带有'onChange'的表单中的状态。但是在这里我使用'watch'(因为一个单选按钮的问题),它是工作的。所以我观察,每次发生变化时,我调度我的数据。但是在第一次加载时,react hook表单观察和调度,我失去了我的初始状态
下面是我的一部分代码,其中包含watch操作
const {
register,
watch,
} = useForm();
const data = watch(); // when pass nothing as argument, you are watching everything
useEffect(() => {
dispatch(
fetchData({
name: data.name,
//here i'm watching but loosing my initial state a the first render
})
);
);
}, [data, dispatch]);
这是我的登记表
import React from 'react';
export const Name = ({ register }) => {
return (
<form>
<div >
<label >Enter your name </label>
<input
{...register('name')}
type="text"
name="name"
/>
<br />
</div>
</form>
);
};
这是我的初始状态切片
const InfosSlice = createSlice({
name: 'infos',
initialState: {
UserInfos: {
name: 'Lydia',
},
},
reducers: {
fetchData: (state, action) => {
state.UserInfos.name= action.payload?.name;
},
},
});
export const infosReducer = InfosSlice .reducer;
export const {
-
fetchData,
} = InfosSlice.actions;
在redux Devtools中,在第一次加载时,我看到我具有初始状态
UserInfos: {
name: 'Lydia',
},
然后在第一次使用fetchData监视之后,我只有
UserInfos: {
},
如何保持我的初始状态?我在考虑类似于“手表”的东西,但只有当初始值改变时才改变
我已经为这个问题简化了我的代码,但是在我的项目中,我有一个多步骤的表单,大量的数据等等。
1条答案
按热度按时间idv4meu81#
已解决:
因此,对于我的情况(我有多个值要分派),我删除了“fetchData”中的“name”,并在切片中创建了另一个函数。
然后直接在输入中进行onChange