反应帖子不显示标题

Question

已修复： 我一口气改变了一些东西，所以我不能真正说出是什么解决了我的问题，但基本上： -API 需要 int 或 long，我正在发送 String.. parseInt 解决了它。 我最初声明了一个数据对象：

const [data, setData] = useState({

})

对于我稍后要发送的所有值（以及正确的数据类型！如果我不确定，null 似乎对于初始化工作得很好）。 -另一个问题是我在我的 POST 请求之前将所有数据合并到一个钩子中，因为它是异步的..这是一个坏主意。 -最后，但最重要的是，这可能是问题所在（感谢 EntiendoNull 和 JMadelaine），我将我的数据初始化为 [] 而不是 {}，所以我在数组内发送一个对象.. 因此@987654322我发布时 API 中的 @ 消息。 .------------------------------------------------ -------------------------------------------------- -------------------------------------------。

我遇到了一个帖子请求无法正常工作的问题。

基本上，表头不对，应该是{"content-type": "application/json"} 但相反，它是一个空对象。 这是我做 POST 的地方：

const [data, setData] = useState([]);
    const createMission = async (e) => {
        setData({
            ...data,
            nom:state.missionName,
            id_client:state.currentClientKey,
            id_consultant:state.currentConsultantId,
            id_manager:1,
            id_ro:state.currentROKey,
            id_rc:state.currentRCKey,
            detail:state.missionDescription,
            adresse:state.adresse,
            frequence_eval:6,
            date_debut:state.startDate,
            date_fin:state.endDate,
            metier:state.metier
        });
        let headers = {
          headers: {'Content-Type': 'application/json'}
        };
        axios.post('http://localhost:8080/mission',data,{"headers" : headers})
        .then(res => {
            console.log(res);
        });

这是我导航器控制台上 res 的内容：

   {…}
    ​
    config: Object { url: "http://localhost:8080/mission", method: "post", data: "{\"nom\":\"\",\"id_consultant\":null,\"id_manager\":1,\"detail\":\"\",\"adresse\":\"\",\"frequence_eval\":6,\"date_debut\":null,\"date_fin\":null,\"metier\":null}", … }
    ​
    data: ""
    ​
    headers: Object {  }
    ​
    request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
    ​
    status: 200
    ​
    statusText: ""
    ​
    <prototype>: Object { … }

数据发送正常，我得到了 200 状态，但是正如你所见，标题中有一个空对象，数据是一个空字符串""。

有趣的是，我在另一个组件上做了几乎完全相同的事情，而且效果很好： 在这种情况下，我什至没有指定标题。

const createClient = async (e) => {
        axios.post('http://localhost:8080/client', {nom:state.nomClient})
        .then(res => {
            console.log(res);
        });
    };

这是日志：

 {…}
    ​
    config: Object { url: "http://localhost:8080/client", method: "post", data: "{\"nom\":\"aze\"}", … }
    ​
    data: Object { id: 372, nom: "aze" }
    ​
    headers: Object { "content-type": "application/json" }
    ​
    request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
    ​
    status: 200
    ​
    statusText: ""
    ​
    <prototype>: Object { … }

API 是一样的，都是@RequestBody。 在这里执行任务：

@PostMapping
    public Mission addMission (@RequestBody MissionBean missionBean){
        Optional<Client> optionalClient = clientRepository.findById(missionBean.id_client);
        Optional<Consultant> optionalConsultant = consultantRepository.findById(missionBean.id_consultant);
        Optional<Utilisateur> optionalManager = utilisateurRepository.findById(missionBean.id_manager);
        Optional<Utilisateur> optionalRo = utilisateurRepository.findById(missionBean.id_ro);
        Optional<Utilisateur> optionalRc = utilisateurRepository.findById(missionBean.id_rc);
        if (optionalClient.isPresent() && optionalManager.isPresent() && optionalConsultant.isPresent() && optionalRo.isPresent() && optionalRc.isPresent()){
            Mission newMission = new Mission(
                    missionBean.nom,
                    optionalClient.get(),
                    optionalConsultant.get(),
                    optionalManager.get(),
                    optionalRo.get(),
                    optionalRc.get(),
                    missionBean.detail,
                    missionBean.adresse,
                    missionBean.frequence_eval,
                    missionBean.date_debut,
                    missionBean.date_fin,
                    missionBean.metier
            );
            missionRepository.save(newMission);
            return newMission;
        }
        return null;
    }

这里是给客户的（第二个例子很好用）：

@PostMapping
    public Client addClient (@RequestBody Client client){
        clientRepository.save(client);
        Critere critere = new Critere(client,"Ponctualité",true);
        Critere critere2 = new Critere(client,"Assiduité",true);
        Critere critere3 = new Critere(client,"Intégration",true);
        critereRepository.save(critere);
        critereRepository.save(critere2);
        critereRepository.save(critere3);
        return client;
    }

我尝试了许多不同的方法来指定标题，但仍然不起作用。 该请求运行良好（200），但API端无法理解数据，没有标头，因此数据为空字符串，我对此有点陌生，所以我被困在这里。当我检查我的数据库时，没有添加任何新内容。

编辑： 每次我发出请求时，我都会从 API 收到一条消息：

2020-02-22 22:19:39.737  WARN 4205 --- [nio-8080-exec-7] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of `com.evalside.project.beans.MissionBean` out of START_ARRAY token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of `com.evalside.project.beans.MissionBean` out of START_ARRAY token
 at [Source: (PushbackInputStream); line: 1, column: 1]]

也许这可以帮助指出问题

Edit2：我的一些值应该是 int 但以 String 的形式出现（刚刚注意到）要修复它并再试一次

Answer 1

你可能不想那样使用你的状态。

首先，你的数据状态的初始值应该是一个对象（以后根据你指向它的类型和值来做）。最好从一开始就清楚你的意图:)

const [data, setData] = useState({});

第二，在更新状态时，你这样做可能会导致问题。 考虑改用setDate(prevState => { // your logic })。

第三，从您展示的代码来看，按照您的方式设置您的状态然后将其提供给您的axios.post 请求并没有多大意义。或者还有什么其他原因导致这些值在您的请求中使用之前存储在一个状态中？它们中的大多数似乎已经存储在其他一些state 中，对吧？

相反，您可以声明一个 const 来保存这些值：

const myData = {
    nom:state.missionName,
    id_client:state.currentClientKey,
    id_consultant:state.currentConsultantId,
    id_manager:1,
    id_ro:state.currentROKey,
    id_rc:state.currentRCKey,
    detail:state.missionDescription,
    adresse:state.adresse,
    frequence_eval:6,
    date_debut:state.startDate,
    date_fin:state.endDate,
    metier:state.metier
}

通常，在您完成副作用并收到响应后，您可能想要更新这样的状态。

第四，你确实声明了一个headers-object；

let headers = {
    headers: {'Content-Type': 'application/json'}
};

所以在你的 axios-request 中这样做：

axios.post('http://localhost:8080/mission', data, headers);

而不是这个：

axios.post('http://localhost:8080/mission',data,{"headers" : headers})

Answer 2

感谢您的帮助

First, the initial value of your data state should be an object (according do what kind of type and value you point it to be later). Better be clear with your intentions from start :)

const [data, setData] = useState({});

实际上是这样，我这样写的：const [data, setData] = useState([]); not with {}。

我开始接触钩子了，所以是的，我还没有正确的习惯，我会尝试更频繁地使用setDate(prevState => { // your logic })。

我有几个组件都将一些值提升到这个组件中，最终会发出 post 请求，这就是为什么它对所有状态和传递的数据有点混乱，但我尝试了很多方法，而且我已经尝试过简单地做：

const data = {name:myName, date:myDate etc..}
(...)
axios.post('url', data, headers)

我在 API 中错过了其他一些事情，将其添加到帖子中，也许会有所帮助；）