React 给了我两倍的 API 结果

Question

我的应用程序在 rect 中使用 API 可以正常工作，但它会使结果翻倍。也就是说，它给了我正确的结果，但连续 2 次。是我在 REACT 的第一步

这是我的 REACT 组件：

import React, { useEffect, useState, Fragment } from 'react';
// Importar cliente Axios
import clienteAxios from '../../config/axios';

function Clientes () {
// Trabajar con el State
// clientes = State
// guardarClientes = Funcion para guardar el State
const [clientes, guardarClientes] = useState({});

//Query a la API
const consultarAPI = async() => {
// console.log('Consultando...');
const clientesConsulta = await clienteAxios.get('/clientes');
// console.log(clientesConsulta.data.clientes);
// Colocar el resultado en el State
guardarClientes(clientesConsulta.data.clientes);
}
//  Use effect es similar a componentdidmount y willmount
useEffect( () => {
consultarAPI();
}, [] );

function createArray(clientes) {
if (clientes && clientes.length > 0) {
return clientes.forEach(cliente => console.log(cliente)
);
}
return [];
}


return (
<Fragment>
<h2>Clientes</h2>
{/* {console.log(clientes)} */}
{/* {console.log(guardarClientes)} */}
<ul className="listado-clientes">
{createArray(clientes)}
</ul>
</Fragment>
)
}
export default Clientes;

代码运行良好，但在终端中它给了我 2 倍相同的代码。 提前非常感谢

Answer 1

尝试将 api 调用函数移动到 useEffect 钩子中，如下所示：

import React, { useEffect, useState, Fragment } from 'react';
// Importar cliente Axios
import clienteAxios from '../../config/axios';
function Clientes () {
// Trabajar con el State
// clientes = State
// guardarClientes = Funcion para guardar el State
const [clientes, guardarClientes] = useState({});
//  Use effect es similar a componentdidmount y willmount
useEffect( () => {
//Query a la API
const consultarAPI = async () => {
const clientesConsulta = await clienteAxios.get('/clientes');
// Colocar el resultado en el State
guardarClientes(clientesConsulta.data.clientes);
}
consultarAPI();
}, [] );
function createArray(clientes) {
if (clientes && clientes.length > 0) {
return clientes.forEach(cliente => console.log(cliente)
);
}
return null; // <-- Change to return null if no clients are present. 
}

return (
<Fragment>
<h2>Clientes</h2>

<ul className="listado-clientes">
{createArray(clientes)}
</ul>
</Fragment>
)
}
export default Clientes;