发布请求发送了一个空对象。反应应用答案

【问题标题】：Post request sent a null object. React app发布请求发送了一个空对象。反应应用
【发布时间】：2022-09-23 11:22:05
【问题描述】：

我正在构建一个简单的 React 应用程序，它将创建联系人并使用它们来安排会议。

我试图构建一个将客户端提交的联系人保存到数据库的后端。我使用 Express 作为服务器，使用路由和 postgresql 作为数据库。

但是，在我实现了添加联系人的发布请求方法后，后端在提交新联系人后收到了一个空的空对象。我包括了实现发布请求和后端路由器的前端代码组件。

前端

export const ContactsPage = (props) => {
 const [name, setName] = useState(\'\');
 const [phone, setPhone] = useState(\'\');
 const [email, setEmail] = useState(\'\');
 const [duplicate, setDuplicate] = useState(false);
 
 
  const handleSubmit = (e) => {
    e.preventDefault();
    /*
    Add contact info and clear data
    if the contact name is not a duplicate
    */
   if(!duplicate){
     props.addContacts(name,phone,email);
     setName(\'\');
     setPhone(\'\');
     setEmail(\'\');
    }
    //Post request 
    const data = { name, phone, email };
    fetch(\'http://localhost:5000/api/contacts\', {
         method: \'POST\',
         mode: \'cors\',
         headers: {
           \'Accept\': \'application/json\',
           \'Content-Type\': \'application/json\'
         },
         data: JSON.stringify(data)
       }).then(() => {
         console.log({name,phone,email})
       }).catch(error => {
         // handle network errors
         console.error(error);
       });
  };
  /*
  Using hooks, check for contact name in the 
  contacts array variable in props
  */
 useEffect(() => {
  const nameIsDuplicate = () => {
    const found = props.contacts.find((contact) => contact.name === name);
    if (found !== undefined) {
      return true;
    } else {
      return false;
    }
  };

  if (nameIsDuplicate()===true) {
    setDuplicate(true);
  } else {
    setDuplicate(false);
  }
  
}, [name,duplicate,props.contacts]);

 
  return (
    <div>
      <section>
        <h2>
          Add Contact
          {duplicate? \"- Name already exists -\" : \"\"}
          </h2> 
        <ContactForm
          name = {name}
          email = {email}
          phone = {phone}
          setName = {setName}
          setEmail = {setEmail}
          setPhone = {setPhone}
          onSubmit = {handleSubmit} />
      </section>
      <hr />
      <section>
        <h2>Contacts</h2>
        <TileList
          list={props.contacts}
        />
      </section>
    </div>
  );
};

后端：

app.use(bodyParser.json());
app.use(cors({ origin: \'http://localhost:3000\'}));
app.get(\'/api/contacts\', (request,response,next) => {
    pool.query(\'SELECT * FROM contacts\', (err, res) => {
        if (err) return next(err);
    
        response.json(res.rows);
    });
});

app.post(\'/api/contacts\', (request, response, next) => {
    const { name, email, phone } = request.body;
    
    pool.query(
        \'INSERT INTO contacts(name, phone, email) VALUES($1, $2, $3)\',
        [name,phone,email],
            (err, res) => {
                if (err) return next(err);
                response.redirect(\'/api/contacts\');
            }
    );
});

app.use((err,req,res,next) => {
    res.json(err);
})

const port = 5000;

app.listen(port, () => console.log(`Server started on port ${port}`));

标签： reactjs postgresql express react-hooks http-post

【解决方案1】：

我解决了这个问题。发布请求标头的请求正文键错误。 “数据”而不是“正文”

fetch('http://localhost:5000/api/contacts', {
     method: 'POST',
     mode: 'cors',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(data)

【讨论】：