不完整的负载 | React 和 Redux 工具包
Uncomplete payload | React & Redux Toolkit
我有一个大问题，也许它不是那么大但是我几乎 24 小时没有睡觉因为 it.I 几乎没有完成这个切片，但是现在，当我提交数据时，我只得到自动设置编号..
因此，要 clear.I 有一个技能组件，其中我有 2 个输入表单和一个按钮，我需要从两个输入中检索数据，然后，当它们被提交时，被获取并保存在 persistor 中。到现在为止一切都很好，我引入数据，post 请求成功，但是，有效负载仅具有 mirage js 生成的 id automatically.But 我需要一个包含 Type、Range props 和用它们的值，每次我点击按钮时，这个对象的数组应该被填充。
这是我的组件：
我在这里提交数据：
如您所见，那里只有 id。我被困住了...
上面是我提交数据6次时的列表..只有id，我不知道可能是什么问题，请帮助..
技能构成：
import React, { useState,useEffect } from 'react'
import { Formik, Form, useFormik } from 'formik'
import * as Yup from 'yup'
import FormikControl from '../Form/FormikControl'
import DisplayFormikState from '../Form/DisplayFormikState.js'
import { useDispatch, useSelector } from 'react-redux'
import { addNewSkill,fetchSkills,selectSkill } from '../../features/skills/skillSlice'
const Skills = () =>{
const dispatch = useDispatch();
// const [skill, setSkills] = useState({
// name: '',
// range: null
// });
useEffect(()=>{
dispatch(fetchSkills());
},[dispatch])
// const userInfo = useSelector(selectSkill);
// const skillList = useSelector(state => state.skillState.skills)
// console.log('skillList',skillList)
const { status, error } = useSelector(state => state.skills)
// console.log(status)
// console.log(error)
const [type,setType] = useState('')
const [range,setRange] =useState('')
const handleAction = (e) => {
e.preventDefault()
dispatch(addNewSkill(type));
dispatch(addNewSkill(range));
setType('');
setRange('');
}
// const handleChange = (e) => {
// const { name, value } = e.target;
// setSkills({ ...skill, [name]: value });
// };
// const handleSubmit = (e) => {
// e.preventDefault();
// dispatch(addNewSkill(skill));
// };
// import { useSelector } from "react-redux";
// As you see we're getting the whole state
// but we're only returning list which is the
// name we gave it in the reducers file
const list = useSelector(state => state.list);
const formik = useFormik({
// initialValues:{
// name: skill.name,
// range: skill.range
// },
validationSchema:Yup.object({
}),
})
return(
<>
<section id="skills">
<h1 className='SkillSection'>Skills</h1>
<form>
<div>
<label htmlFor="type">Type</label>
<input
id='type'
name='name'
type='text'
placeholder='Enter skill name'
value={type}
onChange={(e)=>setType(e.target.value)}
// value={formik.values.name}
/>
</div>
<div>
<label htmlFor="level">Level</label>
<input
id='level'
type='text'
name='range'
placeholder='Enter range'
value={range}
onChange={(e)=>setRange(e.target.value)}
// value={formik.values.range}
/>
</div>
<button type='submit' onClick={handleAction}>Submit</button>
</form>
</section>
</>
)
}
export default Skills
切片器：
export const fetchSkills = createAsyncThunk(
'skills/fetchSkills',
async (_, {rejectWithValue}) => {
try{
const response = await fetch('/api/skills',{
method:'GET',
})
// console.log(response)
if(!response.ok){
throw new Error ('Server Error!');
}
const data = await response.json();
// console.log(data)
return data;
} catch(error){
return rejectWithValue(error.message);
}
}
);
const setError = (state, action) => {
state.status = 'rejected';
state.error = action.payload;
}
export const addNewSkill = createAsyncThunk(
'skills/addNewSkill',
async (skillData,{rejectWithValue,dispatch}) =>{
const {skillName,skillRange} = skillData
try{
const skill = {
name: skillName,
range: skillRange,
};
const response = await fetch('/api/skills',{
method:'POST',
headers:{
'Content-name' : 'application/json',
},
body: JSON.stringify(skill)
});
if(!response.ok){
throw new Error('Can\'t add skill. Server error')
}
const data = await response.json();
dispatch(setSkill(data))
}catch(error){
return rejectWithValue(error.message);
}
}
)
export const skillSlice = createSlice({
name: "skills",
initialState: {
skills:[],
status: null,
error: null
},
reducers: {
setSkill: (state, action) => {
// console.log("action", action.payload);
// state.name = action.payload?.name;
// state.range = action.payload?.range;
state.skills.push(action.payload);
// localStorage.setItem(state.name,action.payload.range)
},
},
extraReducers:{
[fetchSkills.pending]:(state,action)=>{
state.status = 'loading';
state.error = null;
},
[fetchSkills.fulfilled]:(state,action)=>{
state.status = 'resolved';
state.name = action.payload;
},
[fetchSkills.rejected]: setError,
}
});
const { setSkill } = skillSlice.actions;
export const selectSkill = (state) => state?.skill;
export default skillSlice.reducer;
我模拟 api 的 Miragejs 服务器：
import { createServer,Model } from "miragejs"
export const makeServer =({ environment = 'test' } = {}) => {
let server = createServer({
environment,
models: {
educations: Model,
skills:Model
},
seeds(server) {
server.create("education", { date: 2001, title: "Title 0", text: "Elit voluptate ad nostrud laboris. Elit incididunt mollit enim enim id id laboris dolore et et mollit. Mollit adipisicing ullamco exercitation ullamco proident aute enim nisi. Dolore eu fugiat consectetur nulla sunt Lorem ex ad. Anim eiusmod do tempor fugiat minim do aliqua amet ex dolore velit.\r\n" });
server.create("education", { date: 2000, title: "Title 1", text: "Et irure culpa ad proident labore excepteur elit dolore. Quis commodo elit culpa eiusmod dolor proident non commodo excepteur aute duis duis eu fugiat. Eu duis occaecat nulla eiusmod non esse cillum est aute elit amet cillum commodo.\r\n" });
server.create("education", { date: 2012, title: "Title 2", text: "Labore esse tempor nisi non mollit enim elit ullamco veniam elit duis nostrud. Enim pariatur ullamco dolor eu sunt ad velit aute eiusmod aliquip voluptate. Velit magna labore eiusmod eiusmod labore amet eiusmod. In duis eiusmod commodo duis. Exercitation Lorem sint do aliquip veniam duis elit quis culpa irure quis nulla. Reprehenderit fugiat amet sint commodo ex.\r\n" });
},
routes() {
//this.namespace = 'api/educations';
this.get('api/educations', (schema, request) => {
return schema.educations.all();
},
{ timing: 1000 });
// this.namespace = 'api/skills';
this.get('api/skills', (schema, request) => {
return schema.skills.all();
},
{ timing: 1000 });
this.post('api/skills', (schema, request) => {
let attrs = JSON.parse(request.requestBody);
return schema.skills.create(attrs);
},
{ timing: 1000 });
},
})
return server;
}
和根减速器：
const rootReducer = combineReducers({
visibilityState: toggleButtonReducer,
educationState: educationReducer,
skills : skillReducer
})
您正在使用字符串值调度 addNewSkill，而您期待的是 thunk 中间件中的对象。
dispatch(addNewSkill(type));
dispatch(addNewSkill(range));
export const addNewSkill = createAsyncThunk(
'skills/addNewSkill',
async (skillData,{rejectWithValue,dispatch}) =>{
const {skillName,skillRange} = skillData
// skillData is not an object but a string
})
你应该用这个替换你的 handleAction。
const handleAction = (e) => {
e.preventDefault()
dispatch(addNewSkill({skillName: type, skillRange: range}));
setType('');
setRange('');
}
我有一个大问题，也许它不是那么大但是我几乎 24 小时没有睡觉因为 it.I 几乎没有完成这个切片，但是现在，当我提交数据时，我只得到自动设置编号..
因此，要 clear.I 有一个技能组件，其中我有 2 个输入表单和一个按钮，我需要从两个输入中检索数据，然后，当它们被提交时，被获取并保存在 persistor 中。到现在为止一切都很好，我引入数据，post 请求成功，但是，有效负载仅具有 mirage js 生成的 id automatically.But 我需要一个包含 Type、Range props 和用它们的值，每次我点击按钮时，这个对象的数组应该被填充。
这是我的组件：
我在这里提交数据：
如您所见，那里只有 id。我被困住了...
上面是我提交数据6次时的列表..只有id，我不知道可能是什么问题，请帮助..
技能构成：
import React, { useState,useEffect } from 'react'
import { Formik, Form, useFormik } from 'formik'
import * as Yup from 'yup'
import FormikControl from '../Form/FormikControl'
import DisplayFormikState from '../Form/DisplayFormikState.js'
import { useDispatch, useSelector } from 'react-redux'
import { addNewSkill,fetchSkills,selectSkill } from '../../features/skills/skillSlice'
const Skills = () =>{
const dispatch = useDispatch();
// const [skill, setSkills] = useState({
// name: '',
// range: null
// });
useEffect(()=>{
dispatch(fetchSkills());
},[dispatch])
// const userInfo = useSelector(selectSkill);
// const skillList = useSelector(state => state.skillState.skills)
// console.log('skillList',skillList)
const { status, error } = useSelector(state => state.skills)
// console.log(status)
// console.log(error)
const [type,setType] = useState('')
const [range,setRange] =useState('')
const handleAction = (e) => {
e.preventDefault()
dispatch(addNewSkill(type));
dispatch(addNewSkill(range));
setType('');
setRange('');
}
// const handleChange = (e) => {
// const { name, value } = e.target;
// setSkills({ ...skill, [name]: value });
// };
// const handleSubmit = (e) => {
// e.preventDefault();
// dispatch(addNewSkill(skill));
// };
// import { useSelector } from "react-redux";
// As you see we're getting the whole state
// but we're only returning list which is the
// name we gave it in the reducers file
const list = useSelector(state => state.list);
const formik = useFormik({
// initialValues:{
// name: skill.name,
// range: skill.range
// },
validationSchema:Yup.object({
}),
})
return(
<>
<section id="skills">
<h1 className='SkillSection'>Skills</h1>
<form>
<div>
<label htmlFor="type">Type</label>
<input
id='type'
name='name'
type='text'
placeholder='Enter skill name'
value={type}
onChange={(e)=>setType(e.target.value)}
// value={formik.values.name}
/>
</div>
<div>
<label htmlFor="level">Level</label>
<input
id='level'
type='text'
name='range'
placeholder='Enter range'
value={range}
onChange={(e)=>setRange(e.target.value)}
// value={formik.values.range}
/>
</div>
<button type='submit' onClick={handleAction}>Submit</button>
</form>
</section>
</>
)
}
export default Skills
切片器：
export const fetchSkills = createAsyncThunk(
'skills/fetchSkills',
async (_, {rejectWithValue}) => {
try{
const response = await fetch('/api/skills',{
method:'GET',
})
// console.log(response)
if(!response.ok){
throw new Error ('Server Error!');
}
const data = await response.json();
// console.log(data)
return data;
} catch(error){
return rejectWithValue(error.message);
}
}
);
const setError = (state, action) => {
state.status = 'rejected';
state.error = action.payload;
}
export const addNewSkill = createAsyncThunk(
'skills/addNewSkill',
async (skillData,{rejectWithValue,dispatch}) =>{
const {skillName,skillRange} = skillData
try{
const skill = {
name: skillName,
range: skillRange,
};
const response = await fetch('/api/skills',{
method:'POST',
headers:{
'Content-name' : 'application/json',
},
body: JSON.stringify(skill)
});
if(!response.ok){
throw new Error('Can\'t add skill. Server error')
}
const data = await response.json();
dispatch(setSkill(data))
}catch(error){
return rejectWithValue(error.message);
}
}
)
export const skillSlice = createSlice({
name: "skills",
initialState: {
skills:[],
status: null,
error: null
},
reducers: {
setSkill: (state, action) => {
// console.log("action", action.payload);
// state.name = action.payload?.name;
// state.range = action.payload?.range;
state.skills.push(action.payload);
// localStorage.setItem(state.name,action.payload.range)
},
},
extraReducers:{
[fetchSkills.pending]:(state,action)=>{
state.status = 'loading';
state.error = null;
},
[fetchSkills.fulfilled]:(state,action)=>{
state.status = 'resolved';
state.name = action.payload;
},
[fetchSkills.rejected]: setError,
}
});
const { setSkill } = skillSlice.actions;
export const selectSkill = (state) => state?.skill;
export default skillSlice.reducer;
我模拟 api 的 Miragejs 服务器：
import { createServer,Model } from "miragejs"
export const makeServer =({ environment = 'test' } = {}) => {
let server = createServer({
environment,
models: {
educations: Model,
skills:Model
},
seeds(server) {
server.create("education", { date: 2001, title: "Title 0", text: "Elit voluptate ad nostrud laboris. Elit incididunt mollit enim enim id id laboris dolore et et mollit. Mollit adipisicing ullamco exercitation ullamco proident aute enim nisi. Dolore eu fugiat consectetur nulla sunt Lorem ex ad. Anim eiusmod do tempor fugiat minim do aliqua amet ex dolore velit.\r\n" });
server.create("education", { date: 2000, title: "Title 1", text: "Et irure culpa ad proident labore excepteur elit dolore. Quis commodo elit culpa eiusmod dolor proident non commodo excepteur aute duis duis eu fugiat. Eu duis occaecat nulla eiusmod non esse cillum est aute elit amet cillum commodo.\r\n" });
server.create("education", { date: 2012, title: "Title 2", text: "Labore esse tempor nisi non mollit enim elit ullamco veniam elit duis nostrud. Enim pariatur ullamco dolor eu sunt ad velit aute eiusmod aliquip voluptate. Velit magna labore eiusmod eiusmod labore amet eiusmod. In duis eiusmod commodo duis. Exercitation Lorem sint do aliquip veniam duis elit quis culpa irure quis nulla. Reprehenderit fugiat amet sint commodo ex.\r\n" });
},
routes() {
//this.namespace = 'api/educations';
this.get('api/educations', (schema, request) => {
return schema.educations.all();
},
{ timing: 1000 });
// this.namespace = 'api/skills';
this.get('api/skills', (schema, request) => {
return schema.skills.all();
},
{ timing: 1000 });
this.post('api/skills', (schema, request) => {
let attrs = JSON.parse(request.requestBody);
return schema.skills.create(attrs);
},
{ timing: 1000 });
},
})
return server;
}
和根减速器：
const rootReducer = combineReducers({
visibilityState: toggleButtonReducer,
educationState: educationReducer,
skills : skillReducer
})
您正在使用字符串值调度 addNewSkill，而您期待的是 thunk 中间件中的对象。
dispatch(addNewSkill(type));
dispatch(addNewSkill(range));
export const addNewSkill = createAsyncThunk(
'skills/addNewSkill',
async (skillData,{rejectWithValue,dispatch}) =>{
const {skillName,skillRange} = skillData
// skillData is not an object but a string
})
你应该用这个替换你的 handleAction。
const handleAction = (e) => {
e.preventDefault()
dispatch(addNewSkill({skillName: type, skillRange: range}));
setType('');
setRange('');
}