为什么我从包含数据的字符串中得到未定义？答案

【问题标题】：Why am I getting undefined from a string that has data?为什么我从包含数据的字符串中得到未定义？
【发布时间】：2022-11-12 05:49:45
【问题描述】：

因此，我使用带有以下代码的 API 从我的数据库中提取数据：

let { id } = useParams();
const [Tenant, setTenant] = useState("");
useEffect(() => {
  axios.get(`http://localhost:3001/tenants/byId/${id}`).then((response) => {
    setTenant(response.data);
  });
}, []);

然后我尝试使用以下方法在我的 Material UI 文本字段上设置默认值：

<TextField 
    id="Field1" 
    defaultValue={Tenant.tenantName}
    label="Tenant Name" 
    variant="outlined" 
    onChange={(event) => {setNtenantName(event.target.value)}}
    required
/>

但是，我什么也没得到。所以我决定console.log(Tenant.tenantName) 并在我的控制台中得到这个：

【问题讨论】：

因为您正在执行Tenant.tenantName 并且您的状态最初是一个没有tenantName 属性的空字符串。您的状态仅在您的 axios GET 请求完成后才设置为您的 API 数据（这不是立即的，需要一些时间）

标签： javascript node.js reactjs

【解决方案1】：

当您尝试访问它时，您的状态还没有准备好。

所以你可以检查一下。

{Tenant && (
   <TextField 
        required id="Field1" 
        defaultValue={Tenant.tenantName}
        label="Tenant Name" 
        variant="outlined" 
        onChange={(event) => {setNtenantName(event.target.value)}}
        />
)}

在旁注中，将州名大写并不常见。

您可以将其更改为：const [tenant, setTenant] = useState(""); 只是为了约定

【讨论】：

【解决方案2】：

Kevin 的建议应该很好用，但你也可以这样做，它可能更容易阅读，并且在获取数据时会显示一个加载器。

if(Tenant === undefined) return <div>Loading data....</div> 
else return (
  <TextField 
     id="Field1" 
     defaultValue={Tenant.tenantName}
     label="Tenant Name" 
     variant="outlined" 
     onChange={(event) => setNtenantName(event.target.value)}
     required 
  />
)

【讨论】：