I am trying to POST an object to a url with an onClick, using the handleClick function. The onClick is firing, however, there is no object showing in the console. This is located in the body of the handleClick under order, and configOptions. Can someone please help me to understand why I am not getting the object that I am looking for?
export type IOrder = {
selectedNetwork:Product
selectNetwork:Product
qty:number
configOptions:Record<string,ConfigOption>
}
type Props = {
closeModal:() => void
}
const ADD_NETWORK_NODE_FORM = ({ closeModal }: Props ) => {
const { productStore } = useDataStore();
const [order, setOrder] = useState<IOrder>({
selectedNetwork:null,
selectNetwork: null,
qty:1,
configOptions:{}
});
const prevOrderState:IOrder = usePrevious(order);
useEffect(() => {
setOrder({ ...order, configOptions:{}, qty:1 })
}, [router.query.selectedNetwork])
useEffect(() => {
if (
prevOrderState &&
( Object.keys(order.configOptions).length > Object.keys(prevOrderState.configOptions).length )
){
const lastConfigOptionKey = Object.keys(order.configOptions)[Object.keys(order.configOptions).length - 1]
document.querySelector(`[data-config-option="${lastConfigOptionKey}"]`).scrollIntoView({
behavior: "smooth", block: "start"
})
}
}, [order.configOptions])
const selectedNetwork = router.query.selectedNetwork ?
productStore.products.find(product => product.pid === parseInt(router.query.selectedNetwork.toString()) )
: null
const FormOptions = useMemo(() => {
const options = [];
options.push(
<NetworkSelect
key={`network-catalog`}
selectedNetwork={selectedNetwork}
selectNetwork={( productId ) => {
if ( !productId ){
const newQuery = { ...router.query }
delete newQuery.selectedNetwork
router.push({
pathname:router.pathname, query: newQuery
})
return
}
router.push({
pathname:router.pathname, query:{ ...router.query, selectedNetwork: productId }
})
}}
/>
)
if ( selectedNetwork )
options.push(
<NetworkConfiguration
key={`network-configuration-${selectedNetwork.pid}`}
selectedNetwork={selectedNetwork}
order={order}
updateOrder={ updatedOrder => {
setOrder(updatedOrder)
}}
/>
)
return options;
}, [order, router.query.selectedNetwork]);
let totalOptions = [], setOptions = []
if ( selectedNetwork){
totalOptions = selectedNetwork.configoptions.configoption.filter(option => includes(['Network Type', 'Node Type', 'Cloud Provider', 'Region'], option.name))
setOptions = Object.keys(order.configOptions).filter( optionName => !!order.configOptions[optionName] )
}
let totalConfigPrice = 0;
Object.keys(order.configOptions).forEach( optionName => {
if (order.configOptions[optionName] )
totalConfigPrice = parseInt(order.configOptions[optionName].pricing.USD.monthly)
});
const totalVariablePrice = selectedNetwork ? parseInt(selectedNetwork.pricing.USD.monthly) totalConfigPrice : 0
const daysInCurrentMonth = new Date(2022, 1, 0).getDate();
const proRataPct = ( daysInCurrentMonth - new Date().getDate() ) / daysInCurrentMonth;
const handleClick = (event: { preventDefault: () => void; }, order: any, configOptions: any) => {
event.preventDefault();
const token = JSON.parse(localStorage.getItem('token'));
axios.post(`${config.API_URL}/order`, {
method:'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token.access_token}`,
'Identity': `${token.id_token}`
},
body:{
order:order,
configOptions:configOptions
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error)
})
}
return (
<AddNetworkNode>
<Form>
{ router.query.selectedNetwork &&
<Summary>
<OrderDetails
selectedNetwork={selectedNetwork}
order={order}
updateOrderQty={ qty => setOrder({ ...order, qty }) }
/>
{ setOptions.length === totalOptions.length &&
<>
<Total>
{`$${totalVariablePrice * order.qty}.00`}
</Total>
<TotalLabel>
/ MTH
</TotalLabel>
<DueToday>
<LineItem>
<LineItemLabel>Setup Fee</LineItemLabel>
<LineItemCost>${selectedNetwork.pricing.USD.msetupfee}</LineItemCost>
</LineItem>
<LineItem>
<LineItemLabel>January Service</LineItemLabel>
<LineItemCost>${((totalVariablePrice * order.qty) * proRataPct).toFixed(2)}</LineItemCost>
</LineItem>
<LineItemBold>
<LineItemBoldLabel>Due Today</LineItemBoldLabel>
<LineItemBoldCost>${(((totalVariablePrice * order.qty) * proRataPct) parseInt(selectedNetwork.pricing.USD.msetupfee)).toFixed(2)}</LineItemBoldCost>
</LineItemBold>
</DueToday>
{/* <DeployNodes onClick={() => handleClick(setOptions)}>
{ `PROVISION ${ order.qty > 1 ? 'NODES' : 'NODE'}` }
</DeployNodes> */}
<DeployNodes onClick={handleClick}>
Deploy Nodes
</DeployNodes>
</>
}
</Summary>
}
</Form>
</AddNetworkNode>
)
};
export default ADD_NETWORK_NODE_FORM
Below you will see the console, showing that there is no object coming from the body of the POST request. This should be coming from the const = handleClick parameters order, and configOptions in the handleClick function.
config:
adapter: ƒ xhrAdapter(config)
data: "{\"method\":\"POST\",\"headers\":{\"Content-Type\":\"application/json\",\"Authorization\":\"Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImFwcElkLThkYTRiNWM1LWRiMDUtNGIzOC1iNTI3LThmYTE3YmViZWEzMy0yMDIxLTA0LTA4VDAzOjA3OjA3LjQzNCIsInZlciI6NH0.eyJpc3MiOiJodHRwczovL3VzLXNvdXRoLmFwcGlkLmNsb3VkLmlibS5jb20vb2F1dGgvdjQvOGRhNGI1YzUtZGIwNS00YjM4LWI1MjctOGZhMTdiZWJlYTMzIiwiZXhwIjoxNjQyNzE1OTUxLCJhdWQiOlsiNDY1NmY5NGEtNzgwNC00YmU3LWJkNzUtMTc2MDVhZGNiZGU3Il0sInN1YiI6IjlkZTIzOWQyLTlhMTEtNDFkNC1hNWNlLTM3N2E0MDQyZDM3OCIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJhbXIiOlsiY2xvdWRfZGlyZWN0b3J5Il0sImlhdCI6MTY0MjYyOTU1MSwidGVuYW50IjoiOGRhNGI1YzUtZGIwNS00YjM4LWI1MjctOGZhMTdiZWJlYTMzIiwic2NvcGUiOiJvcGVuaWQgYXBwaWRfZGVmYXVsdCBhcHBpZF9yZWFkdXNlcmF0dHIgYXBwaWRfcmVhZHByb2ZpbGUgYXBwaWRfd3JpdGV1c2VyYXR0ciBhcHBpZF9hdXRoZW50aWNhdGVkIiwiY2xpZW50SWQiOiJiMWVjZjE5Yy1mNThhLTQ4YjAtYmQ5MS1lMWM5MTEyMGVjYjMiLCJvcmdzIjpbImIxZWNmMTljLWY1OGEtNDhiMC1iZDkxLWUxYzkxMTIwZWNiMyJdLCJ1c2VyTmFtZSI6ImRhbW9uQGJsb2Nrc3BhY2VzLmNvbSJ9.F2C5zU7gH7dt81hynaIAebVxAYGydE2d4vLbzOjkJw6IsN7-2K2YO66lMMOsV_3SThJzWFwOtWDixk5jrCtl5m4GQQJMAsNUP10o_UTUWdCmTMW6AsDjd0cnlBHZGXlxG-cC5nOXqS0tBj652MQwS0y7gvi7cAtfuu-e-ZcSHskTIIyj9soeLqy19o5siOOKjqyw8uK2Hi6uVGgYL1w9F8zb70wncbMQfdVI185z4Cx9-00dawh9zAmRoe7zKGHJgiH5fNyP3eH727OsO4pLWmcZTsQCDiV2SG-hXCFGncGG0LHwz3i3Lf-3sc91LnkCH2vxUCPXj5-Z_ODUl0PPng\",\"Identity\":\"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImFwcElkLThkYTRiNWM1LWRiMDUtNGIzOC1iNTI3LThmYTE3YmViZWEzMy0yMDIxLTA0LTA4VDAzOjA3OjA3LjQzNCIsInZlciI6NH0.eyJpc3MiOiJodHRwczovL3VzLXNvdXRoLmFwcGlkLmNsb3VkLmlibS5jb20vb2F1dGgvdjQvOGRhNGI1YzUtZGIwNS00YjM4LWI1MjctOGZhMTdiZWJlYTMzIiwiYXVkIjpbIjQ2NTZmOTRhLTc4MDQtNGJlNy1iZDc1LTE3NjA1YWRjYmRlNyJdLCJleHAiOjE2NDI3MTU5NTEsInRlbmFudCI6IjhkYTRiNWM1LWRiMDUtNGIzOC1iNTI3LThmYTE3YmViZWEzMyIsImlhdCI6MTY0MjYyOTU1MSwiZW1haWwiOiJkYW1vbkBibG9ja3NwYWNlcy5jb20iLCJuYW1lIjoiZGFtb25AYmxvY2tzcGFjZXMuY29tIiwic3ViIjoiOWRlMjM5ZDItOWExMS00MWQ0LWE1Y2UtMzc3YTQwNDJkMzc4IiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6ImRhbW9uQGJsb2Nrc3BhY2VzLmNvbSIsImlkZW50aXRpZXMiOlt7InByb3ZpZGVyIjoiY2xvdWRfZGlyZWN0b3J5IiwiaWQiOiJhYWEzNDliZC1kNzExLTRkZGQtOTEwZS0xZTY5NmQyOGEwMmQifV0sImFtciI6WyJjbG91ZF9kaXJlY3RvcnkiXX0.e9Md0OAPEfY2Vk-EJy5YPLNTW2Uf7wyllTdPpofYo0Ey-18F23Q0ZouAhxdsU-T8KJF-3WtuXWM89oxcVdxPNVupUAAnX0JpI-3umr7XUFSLFGU5MtaVnzuQ34Nvs1DFH01ursfIYSJDdecrLRaR1OS2PdPiRQJrFKnW3mvI1WIMQGjygXFye9ds-tOEAGhA6IXRb8aW-g2kpSXRFeoeF6xPJ5OpSFW2C4_OZROwsW2vCTb4Xs0LySk0LcYZpvtNTCAqtGaCmjt42zLpuzS1g-3AiMJRanFjf42PApN_GVVO2hbqPUn8i-FYvoojdWVXfLxl4Qi8RYs5Rgzq2vlo6A\"},\"body\":{}}"
headers: {Accept: 'application/json, text/plain, */*', Content-Type: 'application/json'}
maxBodyLength: -1
maxContentLength: -1
method: "post"
timeout: 0
transformRequest: [ƒ]
transformResponse: [ƒ]
transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}
url: "https://localhost/api/order"
validateStatus: ƒ validateStatus(status)
xsrfCookieName: "XSRF-TOKEN"
xsrfHeaderName: "X-XSRF-TOKEN"
[[Prototype]]: Object
data:
Information: Array(1)
0: "updating this information"
length: 1
[[Prototype]]: Array(0)
[[Prototype]]: Object
headers: {access-control-allow-origin: '*', connection: 'keep-alive', content-length: '45', content-type: 'application/json; charset=utf-8', date: 'Thu, 20 Jan 2022 01:49:40 GMT', …}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: "OK"
[[Prototype]]: Object
CodePudding user response：
Firstly i am assuming the second parameter object of axios.post is body to be send to server and not a confusing of using axios with axios methods.
Whenever you send data over to the server, thought it is a json it needs to be send as a string. thats why we add 'Content-Type': 'application/json', to header so server/client know its a json object
Here axios does part of converting body to string and vice versa. and since the JSON.stringify removes keys with undefined values
It can be a case where order and configOptions must be undefined
const option = { c: { a: undefined} }
console.log("o/p", JSON.stringify(option))CodePudding user response：
I solved this problem with the following code change below. Basically, axios does not take a body, it does take data as the format.
const handleClick = (event: { preventDefault: () => void; }, order: any) => {
event.preventDefault();
const token = JSON.parse(localStorage.getItem('token'));
axios.post(`${config.API_URL}/order`, {
method:'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token.access_token}`,
'Identity': `${token.id_token}`
},
data:{
order:order,
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error)
})
}
CodePudding user response：
This is how i do PUT and POST in axios
try {
const { data } = await axios.put(
'/api/categories/edit',
{
id: category._id,
user: userInfo._id,
icon,
title,
shortDesc,
disallowOnHomepage,
longDesc,
contentOptions,
publishContentAtLevel,
publishCommentsAtLevel,
adultsOnly,
hiddenCategory,
},
{ headers: { authorization: `Bearer ${userInfo.token}` } }
);
router.push(`/${category.uniqueUrl}`);
} catch (err) {
alert(getError(err));
console.log(getError(err));
}