javascript - React 给了我两倍的 API 结果
问题描述
我使用 api 的 rect 应用程序正常工作,但结果加倍。也就是说,它给了我正确的结果,但连续两次。是我在 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 调用函数移动到 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;
推荐阅读
- python - 使用 Flask import app.module 和 importlib.reload(app.module)
- hibernate - Spring 仅获取数据而不映射到数据库
- python - tensorflow(tf)变量初始化形状错误?
- java - ComponentScan 没有映射 RestControllers
- c - C程序代码将整数拆分为单独的行上的数字,只有循环没有数组
- kotlin - GrpcServerRule 找不到实现
- matlab - 从具有混合数字和字符串的单元格数组计算平均值
- html - 无法在网站上滚动
- scala - Play Framework 2.6:配置 Akka HTTP 日志记录
- python - 按时间戳差异重复熊猫不起作用