Javascript React路由器查询字符串在状态变量后面一步

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

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

这就是状态变量的外观

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

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

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

---

PS：如果我两次单击提交链接，url参数和QueryString状态将匹配

为了防止出现这种情况，您可以将链接更改为类似

的内容，然后在

submitInput

函数中处理url更新

在

链接上单击
onClick
，将同时触发函数和历史（位置）更新。该链接只是一个
标记，因此在单击该链接时，浏览器会跟随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}`
}

//将链接更新为非链接元素
提交
//然后在submitInput函数的末尾强制更新url
函数submitInput（）{
//存在逻辑
window.location.href=`？name=${finalString}`
}
为了防止出现这种情况，您可以将链接更改为类似于
的链接，然后在
submitInput
功能中处理url更新

在
链接上单击
onClick
，将同时触发函数和历史（位置）更新。该链接只是一个
标记，因此在单击该链接时，浏览器会跟随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}`
}

//将链接更新为非链接元素
提交
//然后在submitInput函数的末尾强制更新url
函数submitInput（）{
//存在逻辑
window.location.href=`？name=${finalString}`
}
您应该使用一个简单的
span
（应用CSS将其视为锚元素），而不是
链接

另一种方法是，使用
useffect
hook

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>
    );
};

/>V5.1
从“react router dom”导入{useHistory}；
export const YourFunctionName=（）=>{
const[queryString，setQueryString]=React.useState（“？name=”）；
让历史=使用历史（）；
函数submitInput（）{
var inputcn=$（'#inputcn'）.val（）；
var finalString=“？name=“+inputCN；
设置查询字符串（最终字符串）；
}
React.useffect（（）=>{
历史记录推送（查询字符串）
}，[queryString]）
返回(
...
提交
...
);
};
您应该使用一个简单的
span
（应用CSS将其视为锚元素），而不是
链接

另一种方法是，使用
useffect
hook

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>
    );
};

/>V5.1
从“react router dom”导入{useHistory}；
export const YourFunctionName=（）=>{
const[queryString，setQueryString]=React.useState（“？name=”）；
让历史=使用历史（）；
函数submitInput（）{
var inputcn=$（'#inputcn'）.val（）；
var finalString=“？name=“+inputCN；
设置查询字符串（最终字符串）；
}
React.useffect（（）=>{
历史记录推送（查询字符串）
}，[queryString]）
返回(
...
提交
...
);
};
谢谢兄弟！我正在使用React Router V5.1，您的解决方案工作得非常出色！谢谢兄弟！我正在使用React Router V5.1，您的解决方案工作得非常出色！