如何初始化状态变量，以便在当前url上发出get请求

Question

我正在尝试基于params数据生成url

这是代码：

const Feeds = () => {
const [url, setUrl] = useState("");
useEffect(() => {
switch (params.category) {
case "news_National":
setUrl("http://localhost:8090/newsOnAir/national");
break;
case "news_International":
setUrl("http://localhost:8090/newsOnAir/international");
break;
case "XYZ":
navigate("/home");
break;
...........
...........}
axios.get(url)
.then((response) => {
console.log(response);
})
.catch((err) => {
console.log(err);
});
},[params.category])

return (........)
}

但是当对先前的URL状态数据进行CCD_ 2时，问题就发生了。当在那时进行get request时，旧数据持续存在，则状态改变。

我不能排除useEffect的使用，因为在某些情况下，交换机案例具有navigate逻辑。

请指导我如何克服这个问题。

Answer 1

这里确实不需要使用useEffect。请参阅基于道具或状态更新状态。

定义计算url的函数

function getUrl(category) {
// calculate url here based on params.category
}
// then simply use the url by calling function
const Feeds = () => {
const url = getUrl(params.category)
// ... rest of code
}

Answer 2

React setState方法是异步，这意味着即使您调用了您的"setState"；方法，它将不会确保您的状态立即更新。

要绕过此，您可以：

使用setState回调，确保您的状态已更新，如下所示：

setUrl(url, () => {
//url is now updated with the right value
});

或者把你的Api调用放在useEffect钩子里，在那里你可以像这样检查url的值：

useEffect(() => {
if (url !== "")
{
//Here your url should be OK
}
}, [url])