axios 调用的无限循环，反应

Question

最近我一直在做一个个人项目，发生了一些事情，我不知道为什么。当我尝试调用函数以获取值时，它会一直循环，就好像数组中有无限个对象一样。我正在尝试削减这个过程，但此时我不能。

你能告诉我我做错了什么吗？提前致谢

这是我的代码

const ModalBodyUpdatePreparacion: React.FC<modalBodyFormProps> = (props: modalBodyFormProps) => {
const[stockPreparaciones, setStockPreparaciones] = useState<any[]>([]);
const[nombreIng, setNombreIng] = useState('');
useEffect(() => { //I'm using this useEffect hook to obtain the values of my array, which has just two objects at the moment
getPreparaciones();
},[stockPreparaciones.length]);
const getPreparaciones = () => {
console.log(props.objectS);
axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + props.objectS)
.then(result => {
console.log(result);
setStockPreparaciones(result.data.preparaciones);
console.log(stockPreparaciones);
}).catch(console.log); 
}
function getNombre(e:any){ //This is the function that I'm calling
axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + e)
.then(result => {
console.log('busqueda del nombre');
console.log(result);
setNombreIng(result.data.nombre);
console.log(nombreIng);
});
console.log(nombreIng);
return nombreIng;
}
return(
<div>
<Container>
<br></br>
<Grid columns={3} divided>
<Grid.Row>
<Grid.Column>
<label>Nombre del ingrediente:</label>
</Grid.Column>
<Grid.Column>
<label>Cantidad:</label>
</Grid.Column>
<Grid.Column>
<label>Acciones:</label>
</Grid.Column>
</Grid.Row>
{
stockPreparaciones.map(st => ( //Here is where I'm going through my array, it's just about two objects
<Grid.Row key={st.id}>
<Grid.Column>
<Input size='small' placeholder='Nombre ingrediente' value={getNombre(st.codigo_ingrediente)} disabled  /> //Here is were I'm calling the function to get a value
</Grid.Column>
<Grid.Column>
<Input size='small' placeholder='Cantidad*'  value={st.cantidadxpreparacion} disabled/>
</Grid.Column>
<Grid.Column>
<Button variant="secondary" onClick={props.handleSubmit}>
Eliminar
</Button>
</Grid.Column>
</Grid.Row>
))
}
</Grid>
</Container>
<br></br>
<Button variant="secondary" onClick={props.handleSubmit}>
Cancelar
</Button>
<Button variant="secondary" >
Agregar preparacion
</Button>
</div>
);}

问题是，无论我试图获得一个唯一的值，它都会保持渲染数据......所以这有点疯狂。

这是我的控制台的示例：

运行函数"getNombre"的控制台示例

谢谢

Answer 1

问题是：

1. 渲染时的调用函数：

// this will call the function on each render 
value={getNombre(st.codigo_ingrediente)}

2.getNombre函数导致通过setNombreIng重新渲染：

function getNombre(e:any){ //This is the function that I'm calling
axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + e)
.then(result => {
console.log('busqueda del nombre');
console.log(result);
setNombreIng(result.data.nombre); // <--- Setting state will make re- render
console.log(nombreIng);
});
console.log(nombreIng);
return nombreIng;
}

结果：无限循环

---

溶液：

我做了一些更改：

你可以从getPreparaciones调用getNombre，因为它依赖于它，然后你可以直接使用该值并首先保存它API的数据

因此，不需要第二种状态nombreIng

const[stockPreparaciones, setStockPreparaciones] = useState<any[]>([]);
// const[nombreIng, setNombreIng] = useState(''); // <--- NO NEED OF THIS NOW
const getPreparaciones = async () => {
try {
const result = await axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + props.objectS);
let data = result.data.preparaciones
for(let i = 0 ; i< data.length ; i++ ) {
data[i].nombreIng = await getNombre(data[i].codigo_ingrediente); // <--- WE'LL STORE IT INSIDE MAIN DATA
}
setStockPreparaciones(data);
} catch(err) {
catch(console.log); 
}
}
const getNombre = async (e:any) => {
const result= await axios.get('https://inventario-services.herokuapp.com/invservice/stock/getone/?codigo=' + e)
return result.data.nombre;
}

// now you can directly access this with `st.nombreIng`
<Input size='small' placeholder='Nombre ingrediente' value={st.nombreIng} disabled  />