英文:
Type void is not assignable to WriteableDraft
问题
Here's the translated code snippet:
接下来是已翻译的代码部分：
interface ReminderState {
reminders: Reminder[];
}
const initialState: ReminderState = {
reminders: [],
};
export const fetchReminders = createAsyncThunk("getReminders", async () => {
await axios.get("http://localhost:3000/api/reminders")
.then((response) => {
return response.data.reminders;
})
.catch((err: Error | AxiosError) => {
if (axios.isAxiosError(err)) {
return err.response
} else {
return err;
}
})
});
export const reminderSlice = createSlice({
name: "reminder",
initialState,
reducers: {
setReminders: (state, action: PayloadAction<Reminder[]>) => {
state.reminders = action.payload;
},
deleteReminder: (state, action: PayloadAction<string>) => {
state.reminders = state.reminders.filter(
(reminder) => reminder.id === action.payload
);
},
},
extraReducers: (builder) => {
builder
.addCase(fetchReminders.fulfilled, (state, action) => {
state.reminders = action.payload;
})
}
});
export const { setReminders, deleteReminder } = reminderSlice.actions;
export default reminderSlice.reducer;
Please note that the translated code retains the original variable and function names in English for clarity and compatibility with programming languages.
英文:
Does anyone know why I'm getting the following error?
Type 'void' is not assignable to type 'WritableDraft<Reminder>[]'.
I'm trying to create an async thunk to fetch data and store in state on app startup and I'm not sure why I'm having this in my extraReducers:
interface ReminderState {
reminders: Reminder[];
}
const initialState: ReminderState = {
reminders: [],
};
export const fetchReminders = createAsyncThunk("getReminders", async () => {
await axios.get("http://localhost:3000/api/reminders")
.then((response) => {
return response.data.reminders;
})
.catch((err: Error | AxiosError) => {
if (axios.isAxiosError(err)) {
return err.response
} else {
return err;
}
})
});
export const reminderSlice = createSlice({
name: "reminder",
initialState,
reducers: {
setReminders: (state, action: PayloadAction<Reminder[]>) => {
state.reminders = action.payload;
},
deleteReminder: (state, action: PayloadAction<string>) => {
state.reminders = state.reminders.filter(
(reminder) => reminder.id === action.payload
);
},
},
extraReducers: (builder) => {
builder
.addCase(fetchReminders.fulfilled, (state, action) => {
state.reminders = action.payload;
})
}
});
export const { setReminders, deleteReminder } = reminderSlice.actions;
export default reminderSlice.reducer;
答案1
得分: 1
你需要从createAsyncThunk的payloadCreator中返回值。
payloadCreator是：
一个回调函数，应返回一个包含一些异步逻辑结果的 promise。它也可以同步返回一个值。
没有返回值的函数签名是 type fn = () => void；这就是你得到错误的原因。
export const fetchReminders = createAsyncThunk("getReminders", async () => {
// await axios.get("http://localhost:3000/api/reminders")
return axios.get("http://localhost:3000/api/reminders")
.then((response) => {
return response.data.reminders;
})
.catch((err: Error | AxiosError) => {
if (axios.isAxiosError(err)) {
return err.response
} else {
return err;
}
})
});
英文:
You need to return the value from payloadCreator of createAsyncThunk.
payloadCreator is:
> A callback function that should return a promise containing the result of some asynchronous logic. It may also return a value synchronously.
The function signature without return value is type fn = () => void; That's why you got the error.
export const fetchReminders = createAsyncThunk("getReminders", async () => {
// await axios.get("http://localhost:3000/api/reminders")
return axios.get("http://localhost:3000/api/reminders")
.then((response) => {
return response.data.reminders;
})
.catch((err: Error | AxiosError) => {
if (axios.isAxiosError(err)) {
return err.response
} else {
return err;
}
})
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论