反应路由器查询字符串比状态变量落后一步

Question

我有一个 React 路由器链接，当我点击它时，它会调用一个 submitInput 函数。

<Link onClick={submitInput} to={queryString}>Submit</Link>

这就是提交输入函数的样子。它的作用是从输入元素获取值并更新名为 QueryString 的状态变量。

function submitInput() {
var inputTCN = $('#inputTCN').val();
var finalString = "?name=" + inputTCN;
setQueryString(finalString);
}

这就是状态变量的样子。

const [queryString, setQueryString] = React.useState("?name=");

这是我的问题。 假设有人在输入元素中写了"hello"并单击提交链接。网址更改为"？name="而不是"？name=hello"。 假设输入元素现在更改为"hello2"。网址更改为"？name=hello"而不是"？name=hello2"。 如果输入元素更改为"hello3"，则 url 将更改为"？name=hello2"而不是"？name=hello3"。

url 参数始终比 QueryString 的状态落后一步。我该如何防止这种情况？

PS：如果我点击两次提交链接，url参数和查询字符串状态将匹配。

Answer 1

您应该使用一个简单的span而不是Link(应用 CSS 将其视为锚元素(。

<span onClick={submitInput}>Submit</span>

然后在您的函数中，

function submitInput() {
var inputTCN = $('#inputTCN').val();
var finalString = "?name=" + inputTCN;
setQueryString(finalString);
props.history.push(finalString) //This will work
}

另一种方法是，使用useEffect钩子，

React.useEffect(() => {
props.history.push(queryString)
}, [queryString])

---

更新

如果您正在使用React Router V5.1那么您应该这样做，

// > V5.1
import { useHistory } from "react-router-dom";
export const YourFunctionName = () => {
const [queryString, setQueryString] = React.useState("?name=");
let history = useHistory();
function submitInput() {
var inputTCN = $('#inputTCN').val();
var finalString = "?name=" + inputTCN;
setQueryString(finalString);
}
React.useEffect(() => {
history.push(queryString)
}, [queryString])
return (
<div>
...
<span onClick={submitInput}>Submit</span>
...
</div>
);
};

Answer 2

为了防止这种情况，您可以将链接更改为类似<span>的内容，然后在submitInput函数中处理 url 更新。

将onClick放在Link上将同时触发函数和历史记录(位置(更新。链接只是一个<a>标签，因此浏览器在单击时会遵循 href("to"转换为什么(。您的函数也会运行，但由于这是在执行状态更新并且需要一些时间，因此 href 更新已经发生。

相反，如果你把"href"逻辑放到你的函数中，你可以实现你想要的。例如：

// update your link to a non linking element
<span onClick={submitInput}>Submit</span>
// and then force your url update at the end of the submitInput function
function submitInput() {
// existing logic
window.location.href = `?name=${finalString}`
}