![](/img/trans.png)
[英]React api request gives me undefined even when using state
[英]React gives me twice the API result
我的矩形应用程序使用 api,工作正常,但结果加倍。 也就是说,它给了我正确的结果,但连续两次。 是我在 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 倍。 非常感谢您提前
尝试将 api 调用 function 移动到 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.