最近、私は個人的なプロジェクトに取り組んでいますが、何かが起こっているのですが、その理由はわかりません。関数を呼び出して値を取得しようとすると、配列に無限のオブジェクトがあるかのようにループし続けます。私はこのプロセスをtucutしようとしていますが、現時点ではできませんでした。
私が間違っていることを教えていただけますか？前もって感謝します
これが私のコードです
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>
);}
問題は、私が一意の値を取得しようとしても、データをレンダリングし続けるということです...だからそれはちょっとクレイジーです。
これは私のコンソールの例です：
ありがとうございました
問題は：
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;
}
結果：無限ループ
解決 ：
私はいくつかの変更を加えました：
それに依存しているのでgetNombreから呼び出すことができgetPreparaciones、次に値を直接使用して最初のapiのデータを保存できます
したがって、2番目の状態は必要ありません 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 />
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加