为什么这个对象在React和Node.js中出现两次键?

Question

这是我在这里问的另一个问题:POST在React和Node.js中的问题

我在React中做console.log的对象是我将向Node发送的数据。将数据发送到Node是接下来要做的事，我可以这么做，但数据没有以我想要的方式输出。数据在我的inputData"对象，并从"用户名"中提取信息。和";password"输入字段，并对其进行组织，使其成为获取请求的响应，然后将其发送到Node。

问题是我得到
{username: {username: 'aa'}，密码:{password: 'zz'}}
而不是
{username: 'aa'，密码:'zz'}。
inputData"object说的是{username: {username}， password: {password}，}，所以看起来如果我输入'aa'和'zz'作为我的用户名和密码，它们应该来自我用useState声明的变量，所以我会得到{username: 'aa'， password: 'zz'}，但很明显这并没有发生。为什么我两次都能拿回钥匙?

我可以让它工作的"inputData"object {username, password，}，但是我不明白为什么这种方式已经生成键/值对背后的逻辑。

server.js

const express = require('express');
const application = express();
const cors = require('cors');
application.use(cors());
application.use(express.json());
application.use(express.urlencoded({ extended: true }));
// routes are here
application.get('/', (request, response) => {
response.send('Homepage');
});
application.get('/testAPI', (request, response) => {
response.json('Test API working');
});
application.get('/register', (request, response) => {
response.send('Register route');
});
application.post('/register', (request, response) => {
response.json('Send response here');
console.log(request.body);
});
// listen to server
application.listen(8080, () => {
console.log('Listening here...');
});

App.js

import { useState, useEffect } from 'react';
function App() {
// basic state for things
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [data, setData] = useState('Data goes here');
const [API, setAPI] = useState('Data from API goes here');
useEffect(() => {
fetch('http://localhost:8080/testAPI')
.then(res => res.json())
.then(data => setAPI(data));
}, []);
const readUsername = (e) => {
setUsername(e.target.value);
};
const readPassword = (e) => {
setPassword(e.target.value);
};
const handleSubmit = async (e) => {
e.preventDefault();
const inputData = {
username: {username},
password: {password},
};
const requestCall = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(inputData),
};
const result = await fetch('http://localhost:8080/register', requestCall);
console.log(await result.json());
};
return (
<div>
<>
<h1>Hello World!</h1>
<form onSubmit={handleSubmit} method="POST">
<label htmlFor="username" name="username" >Username: </label>
<input htmlFor="username" name="username" onChange={readUsername} />
<br/>
<label htmlFor="password" name="password" >Password: </label>
<input htmlFor="password" name="password" type="password" onChange={readPassword} />
<br/>
<button type="submit">Submit</button>
</form>
<h1>{API}</h1>
</>
</div>
);
}
export default App;

Answer 1

把inputData对象改成这样:

const inputData = {
username: username,
password: password,
};

或者简写为

const inputData = {
username,
password,
};

Answer 2

这是由于username: {username}, password: {password}。正如伊扎克·卡瓦列罗所说。这是javascript的简写，所以，是的，这发生了…

等于写{username: {username: username}}

还有，你说你不理解在命名相同时不定义键/值的效果背后的逻辑，这被称为解构，另一种简写。

你可以这样做:

let username = "Some Name";
let password = "Password";
let User = {username, password};
// same as User = {username: username, password: password}
let {username, password} = User;
// will define two variables with same key and values as User's, since the User object contains them...