为什么即使我更改了数据，useEffect 仍会工作两次？

Question

我尝试使用 useEffect 挂钩从 MainPanel 调用服务 class 中的方法：

这是我的主面板：

function MainPanel() {

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

  useEffect(() => {
    const getCustomers = async () => {
      const customers = await getCustomerList();
      setCustomers({ customers });
      console.log(customers)
    };
    getCustomers()
  }, []);

  return (
    <div className="App">
      {/* do something */}

    </div>
  );
}

export default MainPanel;

这是我从 useEffect 调用的服务方法：

export async function getCustomerList() {

    axios.get("http://localhost:8080/customer", { params: { id: 1 } })
    .then(response => console.log(response.data))
}

在这种情况下，useEffect 正在运行，但运行了两次，console.log 打印了两次（2 次记录正确值，2 次未定义）。

如果我只是使用 return 语句获取数据而不是像

那样打印到控制台

export async function getCustomerList() {

    axios.get("http://localhost:8080/customer", { params: { id: 1 } })
    .then(response => {return response.data})
}

发生了同样的事情，但这次响应是 undefined。我知道它们是不同的问题，但我只需要了解获取数据的正确方法并在 useEffect 中仅使用一次。

如何实现？

Answer 1

您应该在函数 getCustomerList 中添加 return。

export async function getCustomerList() {
    return axios.get("http://localhost:8080/customer", { params: { id: 1 } });    
}

并获取如下数据：

      const res = await getCustomerList();
      setCustomers({ res.data.customers });

Answer 2

可能 React.StrictMode 触发 useEffect 两次以返回您应该按照其他答案 (@Liki Crus) 所建议的那样做的值

为什么即使我更改了数据，useEffect 仍会工作两次？

Why useEffect is working twice even if I change the data?

javascript

typescript

reactjs

react-hooks

use-effect