我正在学习React,并尝试自己做一个小项目,但是我在useEffect
方面遇到了困难。
我尝试使用来自后端的信息自动填充表单。我可以自动填充表单,但它会不断发送GET请求。这是我的代码:
useEffect(() => {
axios
.get('/admin/edit-product' + location.search)
.then((res) => {
const updatedControls = {
...controlsState,
title: {
...controlsState.title,
value: res.data.title,
},
image: {
...controlsState.image,
value: res.data.image,
},
price: {
...controlsState.price,
value: res.data.price,
},
description: {
...controlsState.description,
value: res.data.description,
},
};
setControlsState(updatedControls);
})
.catch((err) => console.error(err));
}, [controlsState, location.search]);
我原以为依赖数组可以阻止它不停地运行,但我想我还需要了解其他内容。
不确定是否需要,这是我的原始状态:
const [controlsState, setControlsState] = useState({
title: {
elementType: 'input',
elementConfig: {
type: 'text',
},
label: 'Product Title: ',
value: '',
},
image: {
elementType: 'input',
elementConfig: {
type: 'url',
},
label: 'Image URL: ',
value: '',
},
price: {
elementType: 'input',
elementConfig: {
type: 'number',
},
label: 'Price: ',
value: '',
},
description: {
elementType: 'textarea',
elementConfig: {
name: 'description',
htmlFor: 'description',
},
label: 'Description: ',
value: '',
},
});
同时 location
是从 react-router-dom 的 useLocation
中获取的