Строка запроса 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=");

Это мой проблема. Допустим, кто-то пишет «привет» в элементе ввода и нажимает «Отправить ссылку». URL меняется на «? Name =», а не «? Name = hello». Допустим, элемент ввода теперь изменен на «hello2». URL меняется на «? Name = hello», а не «? Name = hello2». И если элемент ввода изменяется на «hello3», URL-адрес изменяется на «? Name = hello2», а не «? Name = hello3».

Параметр url всегда на один шаг от состояния QueryString. Как мне предотвратить это?

PS: если я дважды щелкну ссылку «Отправить», параметр url и состояние QueryString совпадут.

Answer 1

Вместо Link вы должны использовать простой span (примените 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 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>
    );
};

Answer 2

Чтобы предотвратить это, вы можете изменить ссылку на что-то вроде <span>, а затем обработать URL-адрес, обновляя все в функции submitInput.

Установка onClick на Link приведет к одновременному запуску как функции, так и обновления истории (местоположения). Ссылка - это просто тег <a>, поэтому браузер следует по href (во что преобразуется «to») при нажатии. Ваша функция также выполняется, но, поскольку она выполняет обновление состояния и займет некоторое время, обновление href уже произошло.

Если вместо этого вы добавите логику "href" c в свою функцию, вы сможете достичь того, чего хотите. Например:

// 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}`
}