Reactjs 使用api调用时,状态更新未在useEffect中发生
我是React.js的新手。我想根据其他状态更新表单中的选项。我正在调用api获取新选项。因此,无论何时发生状态更改,都需要调用此apiReactjs 使用api调用时,状态更新未在useEffect中发生,reactjs,react-hooks,fetch-api,use-effect,usecallback,Reactjs,React Hooks,Fetch Api,Use Effect,Usecallback,我是React.js的新手。我想根据其他状态更新表单中的选项。我正在调用api获取新选项。因此,无论何时发生状态更改,都需要调用此api const [selectedNamespace,setselectedNamespace] = useState[default]; 每当selectedNamespace发生更改时,我都需要调用fetchData api const fetchItemData = useCallback(() => { setError(null
const [selectedNamespace,setselectedNamespace] = useState[default];
每当selectedNamespace发生更改时,我都需要调用fetchData api
const fetchItemData = useCallback(() => {
setError(null);
setSuccessMessage(null);
fetch(getApiPath + selectedNamespace)
.then(response => {
if (!response.ok) {
throw new Error('Something went wrong while fetching item data');
}
return response.json();
}).then(data => {
setItemData(data);
}).catch(error => {
setError(error.message);
})
}, []);
这是我用来调用的useEffect函数:
useEffect(() => {
if (!isEmptyString(selectedNamespace))
fetchItemData();
}, [selectedNamespace, fetchItemData])
我面临的问题是,我在fetchItemdData中访问的selectedNamespace参数始终为空。我认为状态更新延迟了,因为我无法获取selectedNamespace。我不熟悉useEffect和useCallback hook。有人能告诉我我的错误和正确的处理方法吗?我很确定,您不需要在useCallback中包装fetchItemdData 我面临的问题是,我在fetchItemdData中访问的selectedNamespace参数始终为空
const fetchItemData=useCallback(()=>{
...
,[]);//useCallback是当我们需要记忆回调时使用的钩子。(您可以从下面的链接中阅读有关记忆的内容)
因此,useCallback将返回一个回调的记忆版本,该版本仅在其中一个依赖项发生更改时才会更改。这在将回调传递给依赖引用相等性的优化子组件以防止不必要的渲染时非常有用。它的工作方式类似于shouldComponentUpdate生命周期挂钩
这是我们的小提示。
在上面的示例中,您已经共享了当您每次需要更新某个值的状态时,不需要useCallback
const [selectedNamespace,setselectedNamespace] = useState[default];
useEffect(() => {
if (!isEmptyString(selectedNamespace))
fetchItemData();
}, [selectedNamespace, fetchItemData])
function fetchItemData(){
//Whatever data you want
}
function onSetValueOfNamespace(){
setselectedNamespace("abcd");
}
因此,无论何时设置名称空间的值,都将调用useEffect。此外,无论何时装载此特定组件,都将在开始时调用useEffect一次。
我希望这个答案会有所帮助您的selectedNamespace是处处为空还是仅在useCallback函数中为空?
const [selectedNamespace,setselectedNamespace] = useState[default];
useEffect(() => {
if (!isEmptyString(selectedNamespace))
fetchItemData();
}, [selectedNamespace, fetchItemData])
function fetchItemData(){
//Whatever data you want
}
function onSetValueOfNamespace(){
setselectedNamespace("abcd");
}