使用api调用在useEffect中不会发生状态更新

如何解决使用api调用在useEffect中不会发生状态更新

我是 React.js 的新手。我想根据其他状态更新表单中的选项。我正在调用 api 来获取新选项。所以每当状态发生变化时都需要调用这个api。

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 钩子的新手。有人可以让我知道我的错误以及处理此问题的正确方法吗？

解决方法

我很确定，您不需要将 fetchItemdData 包装在 useCallback 中。

我面临的问题是我在 fetchItemdData 中访问的 selectedNamespace 参数始终为空。

NSColor(red: 1,green: 1,blue: 1,alpha: 1)

useCallback 是我们需要记忆回调时使用的钩子。（您可以从以下链接 https://en.wikipedia.org/wiki/Memoization 阅读有关记忆的信息）

因此，useCallback 将返回回调的记忆版本，该版本仅在依赖项之一发生更改时才会更改。这在将回调传递给依赖引用相等性的优化子组件时很有用，以防止不必要的渲染。它的工作原理类似于 shouldComponentUpdate 生命周期钩子。

这是 useCallback 的一个小说明。在上面的例子中，您已经分享了当您需要在每次某个值的值发生变化时更新状态时，不需要 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。我希望这个答案会有所帮助