javascript - React-Router 查询字符串比状态变量落后一步

Question

我有一个 React Router Link，当我单击它时，它会调用submitInput 函数。

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

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

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

这就是状态变量的样子。

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 状态将匹配。

Answer 1

您应该使用简单的 span (应用 CSS 将其视为 anchor 元素)，而不是 Link。

<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钩子(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>
    );
};