从数据库中提取时，setUser 似乎没有设置

Question

我正在通过 ID 拉入一个用户，它似乎最终确实从我的数据库中拉出，因为它在控制台中记录了所有内容，但状态根本不更新变量。我觉得这是一件小而愚蠢的事情，让我无法让用户 2 显示 FirstName LastName - CollectorID | header 更新收集器下的 2 旁边的 FinanceCompany。

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";

  const UpdateUser = () => {
    const { CollectorID } = useParams();
    const [user, setUser] = useState({
      FirstName: '',
      LastName: '',
      CollectorCode: '',
      FinanceCompany: ''
    });

    const { FirstName, LastName, CollectorCode, FinanceCompany } = user;
    
useEffect(() => {
  loadUser();
}, []);// eslint-disable-line react-hooks/exhaustive-deps

const loadUser = async () => {
  const result = await axios.get(`http://localhost:5000/getCollectors/${CollectorID}`);
  setUser(result.data);
};


console.log(user);
    return (
      <div className="previewWrapper">
        <h1>Update Collectors</h1>
          <div className="wrapper">
            {<div><p>{CollectorID} | {FirstName} {LastName} - {CollectorCode} | {FinanceCompany}</p></div>}
          </div>
      </div>
    );
  }

export default UpdateUser;

Answer 1

您期望代码中有对象，但是您的 API 响应是一个对象数组。从您的日志中可以清楚地看到它。

要验证它，你可以简单地尝试

setUser(result.data[0]); // instead of setUser(result.data);

下面这一行 - 总是会产生 undefined 值。因为你正在分配一个数组，所以你这样的变量解构是行不通的

const { FirstName, LastName, CollectorCode, FinanceCompany } = user;

.

您可能想要更改存储用户数据的逻辑，因为 API 响应和当前状态并不真正匹配。

从数据库中提取时，setUser 似乎没有设置

setUser does not seem to get set when pulling from database

sql

node.js

express

reactjs

axios