Question

当我尝试使用 in useEffect 钩子进行 API 调用时（在组件挂载之前），不知何故状态没有得到更新，因此我收到错误 from typing import NewType JSON = str # or: JSON = NewType('JSON', str) def some_function(param1: str, param2: JSON) -> list: ...。

但如果我将相同的逻辑转换为 Class 组件并在 componentDidMount 函数中进行 API 调用，则代码运行良好。

谁能告诉我为什么？

使用 useEffect

Cannot read property of undefined

基于类的组件

import React from "react";
import axios from "axios";
import { useState, useEffect } from "react";

export default function Customers() {
  const [customers, setCustomers] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:5000/customers")
      .then((res) => {
        const data = res.data;
        setCustomers(data);
      })
      .catch((err) => console.log(err));
  }, []);

  useEffect(() => {
    console.log(customers);
  }, [customers]);

  return (
    <div className="container-fluid d-flex flex-column align-items-center justify-content-center">
      <div className="top">Customers</div>
      <div className="tables">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th scope="col">Account No</th>
              <th scope="col">Name</th>
              <th scope="col">E-mail</th>
              <th scope="col">Balance</th>
            </tr>
          </thead>
          <tbody>
            {customers.data.map((customer) => ( // error on this line.
              <tr>
                <th scope="row">{customer.account_no}</th>
                <td>{customer.name}</td>
                <td>{customer.email}</td>
                <td>{customer.balance}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Answer 1

您没有在 def request_time(): return "%.5fs" % (time.time() - start_time) 钩子中正确设置状态。而不是 useEffect 它应该只是 setCustomers({data:data});

setCustomers(data);

现在因为 useEffect(() => { axios .get("http://localhost:5000/customers") .then((res) => { const data = res.data; setCustomers(data); }) .catch((err) => console.log(err)); }, []); 是一个数组，只需映射 customers 而不是 customers。

customers.data.map

所以最终的代码将是

customers.map((customer)=>{})

Answer 2

您将客户状态声明为数组：

const [customers, setCustomers] = useState([]);

但是您在获取数据后传递了一个对象：

 setCustomers({ data: data });

这就是返回部分中的地图迭代失败的原因，因为您将状态设置为对象而不是数组。如果数据是一个数组，你应该只像这样分配它：

setCustomers(data);

componentDidMount 起作用是因为您将 res.data 直接分配给客户状态，结果类似于：

setCustomers(data);

用于 API 调用的 React componentDidMount 与 useEffect 挂钩

2 个答案: