如何在反应钩子axios中获取发布请求的ID？

Question

我正在尝试在此发布请求中创建发布请求 我正在创建应用 之后，我想创建它的留置权，所以我需要获取已创建项目的 id 来创建留置权，所以我的问题是有一种方法可以使用 Axios 获取发布请求创建的项目的 id 并希望反应钩子这张图片可以解释我想做的事情

我尝试了这个解决方案：

    const [idapp, setIdapp] = useState();
          const changeIdapp = (newFruit) => {
            setIdapp(newFruit)
          }
   function CreateApplication() {
        axios.post('http://localhost:8080/app/', {
          applicationName: nameapp,
          dateAjoute: dateajout
         
        },{ headers: authHeader() })
        .then((response) => {changeIdapp(response.data)
          
        }, (error) => {
          console.log(error);
        });
   }

（帖子只返回id（LONG））

按钮上的代码创建：

 <Button
                    className="btn-fill pull-right"
                    type="submit"
                    variant="info"
                    onClick={CreateApplication}
                  >
                    Create App
                  </Button>

但问题是应用程序已创建但它的 id 未保存， 如果有人可以帮助我解决我的问题，我将不胜感激。 我想补充一点，应用程序和留置权处于 OneToMany 关系 所以一个应用程序包含许多留置权 所以在创建应用程序时我到底想做什么我想保存它的 id 来为该应用程序创建许多留置权。

更新： 这是我所有的代码

import React, { useState } from "react";
import Select from 'react-select'
// react-bootstrap components
import {
  Badge,
  Button,
  Card,
  Form,
  Navbar,
  Nav,
  Container,
  Row,
  Col,
} from "react-bootstrap";
import axios from 'axios';
import authHeader from "./services/auth-header";


import Moment from 'moment';


function User() {

  var k;
    
      
  
      const [currentSelect, setCurrentSelect] = useState();
      const changeSelect = (newFruit) => {
        setCurrentSelect(newFruit)
      }

      const [nameapp, setNameapp] = useState();
      const changeNameapp = (newFruit) => {
        setNameapp(newFruit)
      }

      const [dateajout, setDateajout] = useState('2021-06-25');
      const changeDateajout = (newFruit) => {
        setDateajout(newFruit)
      }
      console.log(dateajout);
      const [idapp, setIdapp] = useState();
      const changeIdapp = (newFruit) => {
        setIdapp(newFruit)
      }
      console.log(idapp);


      function CreateApplication() {
        axios.post('http://localhost:8080/app/', {
          applicationName: nameapp,
          dateAjoute: dateajout
         
        },{ headers: authHeader() })
        .then((response) => {
          setIdapp(response.data.idApplication);
          console.log(response.data);
          
        }, (error) => {
          console.log(error);
        });
   }

    
      


      console.log(dateajout);
      console.log(idapp);

      
      

  return (
      
    <>
      <Container fluid>
      
        <Row>
          <Col md="10">
            <Card>
              <Card.Header>
                <Card.Title as="h4">creer Application</Card.Title>
              </Card.Header>
              <Card.Body style={{backgroundColor: '#F3AD7C'}}>
                <Form>
                  <Row>
                   
                    
                      <Form.Group>
                        <label>Application name</label>
                        <Form.Control
                          
                          placeholder="applicationName"
                          type="text"
                          onChange={(event) => changeNameapp(event.target.value)}
                          value={nameapp}
                        ></Form.Control>
                      </Form.Group>
                   
                   
                      
                    
                
                    
                      <Form.Group>
                        <label>Date d'ajoute</label>
                        <Form.Control
                         
                          placeholder="date d'ajoute"
                          type="date"
                          format="YYYY-MM-DD"
                         
                          
                          onChange={(event) => changeDateajout(event.target.value)}
                          value={dateajout}
                        ></Form.Control>
                      </Form.Group>
                    
                    
                      
                    
                  </Row>
                  <p></p>
                  
                  
                  <Button
                    className="btn-fill pull-right"
                    type="submit"
                    variant="info"
                    onClick={CreateApplication}
                  >
                    Create App
                  </Button>
                  <div className="clearfix"></div>
                </Form>
              </Card.Body>
            </Card>
<p></p>
            <Card>
              <Card.Header>
                <Card.Title as="h4">creer Liens</Card.Title>
              </Card.Header>
              <Card.Body style={{backgroundColor: '#F3AD7C'}}>
                <Form>
                  <Row>
                   
                    
                      <Form.Group>
                        <label>URL</label>
                        <Form.Control
                          
                          placeholder="URL du lien"
                          type="text"
                        ></Form.Control>
                      </Form.Group>           
                      <Form.Group>
                        <label>Type Test</label>
                        <p></p>
      <select 
        onChange={(event) => changeSelect(event.target.value)}
        value={currentSelect}
      >
        <option value="1">Repense</option>
        <option value="2">Authantification</option>
        <option value="3">Loop</option>
        
      </select>
                        
                       
                      </Form.Group>  
                                    
                  </Row>
                  <p></p>
                  
 




                  <p></p>
                  <Button
                    className="btn-fill pull-right"
                    type="submit"
                    variant="info"
                  >
                    Create Lien
                  </Button>
                  <div className="clearfix"></div>
                </Form>
              </Card.Body>
            </Card>
          </Col>
          <Col md="4">
            
          </Col>
        </Row>
      </Container>
    </>
  );
  console.log(dateajout);
}


export default User;

Answer 1

如果response.data 看起来像这样：

{
    id: 42
}

那你就可以了

setIdapp(response.data.id);

如果response.data是一个字符串而不是一个JavaScript对象，那么你需要先使用JSON.parse()。

Answer 2

我找到了解决问题的方法 问题是状态总是刷新，因为每当我单击创建应用程序时，页面都会刷新，所以为什么我的 id 永远不会保存所以解决方案是在我单击创建应用程序时停止页面刷新 所以解决方法是修改post的函数creatApplication为

const CreateApplication = event => {
    axios.post('http://localhost:8080/app/', {
      applicationName: nameapp,
      dateAjoute: dateajout

    }, { headers: authHeader() })
      .then((response) => {
        setIdapp(response.data.idApplication);
        setShowcreateApp(false);
        console.log(response.data);

      }, (error) => {
        console.log(error);
      });
    event.preventDefault();
  }

所以现在页面没有刷新，我保存了统计数据