英文:
Geting an AxiosError of request failed with status code 500
问题
以下是您提供的代码的翻译部分：
import axios from 'axios'
import React, { useState } from 'react'
import { Checkbox, Icon } from '@chakra-ui/react'
import { Text, Container, VStack, FormControl, Input, Button, InputGroup, Box, Grid, GridItem } from '@chakra-ui/react'
import { AiFillDelete } from 'react-icons/ai';
import { FiEdit } from 'react-icons/fi';
import { GrCheckbox, GrCheckboxSelected } from 'react-icons/gr';
import TaskBox from '../Components/taskBox';
import { useToast } from '@chakra-ui/react';
const Task = () => {
const [loading, setLoading] = useState(false)
const [taskName, setTaskName] = useState('')
const toast = useToast()
async function handleSubmitTask() {
try {
const config = {
header: {
"Content-type": "application/json",
},
}
const { data } = await axios.post("/api/tasks", { taskName }, config)
} catch (err) {
setLoading(false)
console.log(err);
}
setLoading(false)
}
return (
<header>
<section className="container">
<VStack spacing={'2.5rem'} className="box-heading" borderRadius={'.3rem'}>
<Text fontSize={'3xl'}>Task Manager</Text>
<FormControl display={'flex'} flexDir={'column'} gap={'1rem'}>
<Input
type={'text'}
id={'task'}
placeholder={'Enter Task'}
onChange={(e) => setTaskName(e.target.value)}
/>
<Button bg={'blue.500'} color={'white'} fontSize={'1rem'} justifySelf={'end'} className='addTask' onClick={handleSubmitTask} isLoading={loading}>
Add Task
</Button>
</FormControl>
</VStack>
<article className="box-list">
<TaskBox />
</article>
</section>
</header>
)
}
export default Task
请注意，上面的翻译只包括您提供的代码，不包括其他内容。如果您有其他需要翻译的部分，请提供相应的文本。
英文:
Hello guys I'm building a simple task manager app and while trying to post data from the front page I got an AxiosError of request failed with status code 500. However, when I make the same post request in postman it works fine.
Below is my code
import axios from 'axios'
import React, {useState} from 'react'
import { Checkbox, Icon } from '@chakra-ui/react'
import {Text, Container, VStack, FormControl, Input, Button, InputGroup, Box, Grid, GridItem } from '@chakra-ui/react'
import { AiFillDelete } from 'react-icons/ai';
import {FiEdit} from 'react-icons/fi'
import {GrCheckbox, GrCheckboxSelected} from 'react-icons/gr'
import TaskBox from '../Components/taskBox';
import {useToast} from '@chakra-ui/react'
const Task = ()=>{
const [loading, setLoading] = useState(false)
const [taskName, setTaskName] =useState('')
const toast = useToast()
async function handleSubmitTask(){
try {
const config = {
header: {
"Content-type": "application/json",
},
}
const {data} = await axios.post("/api/tasks", {taskName}, config)
} catch (err) {
setLoading(false)
console.log(err);
}
setLoading(false)
}
return(
<header>
<section className="container">
<VStack spacing={'2.5rem'} className="box-heading" borderRadius={'.3rem'}>
<Text fontSize={'3xl'}>Task Manager</Text>
<FormControl display={'flex'} flexDir={'column'} gap={'1rem'}>
<Input
type='text'
id='task'
placeholder='Enter Task'
onChange={(e)=> setTaskName(e.target.value)}
/>
<Button bg={'blue.500'} color={'white'} fontSize={'1rem'} justifySelf={'end'} className='addTask' onClick={handleSubmitTask} isLoading={loading}>
Add Task
</Button>
</FormControl>
</VStack>
<article className="box-list">
<TaskBox />
</article>
</section>
</header>
)
}
export default Task```
</details>
# 答案1
**得分**: 1
`header` 应该使用复数形式，而 `Content-type` 应该用大写字母 `T`：
```javascript
const config = {
headers: {
"Content-Type": "application/json",
},
}
英文:
header should be in plural form and Content-type should be with a capital T:
const config = {
headers: {
"Content-Type": "application/json",
},
}
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论