Переменная состояния не обновляется в onClickHandler при использовании хуков для получения данных из API пользовательским вводом в реакции

Question

import React, { useState } from "react";

export default function EmpInfo() {
  const [url, setUrl] = useState(
    "http://dummy.restapiexample.com/api/v1/employees/"
  );
  const [data, setData] = useState(null);
  const [input, setInput] = useState("");

  function onChangeHandler(event) {
    setInput(event.target.value);
  }

  function onClickHandler() {
    console.log("Input -> " + input);

    //Input is working as expected

    setUrl(url => url + input);
    getDataFromUrl(url);
  }

  function getDataFromUrl(url) {
    console.log(" URL ->" + url);

    // here the input value is not added to the url

    fetch(url)
      .then(response => {
        if (response.ok) {
          response.json();
        } else {
          throw new Error("Something went wrong");
        }
      })
      .then(data => {
        setData(data);
      })
      .catch();
  }
  return (
    <div>
      <table>
        <tbody>
          <tr>
            <td>
              <h4>Enter Employee ID </h4>
            </td>
            <td>
              <input type="text" placeholder="ID" onChange={onChangeHandler} />
            </td>
            <td>
              <input type="button" onClick={onClickHandler} value="Search" />
            </td>
          </tr>
        </tbody>
      </table>
      <h4>{url}</h4>

      //Here the updated URL with the input added to it is displayed as I click the Button

    </div>
  );
}

Answer 1

React-хуки выполняются асинхронно. Когда вы вызываете setUrl, он будет выполнен в следующем цикле, а когда вы вызываете getDataFromUrl, ваш setUrl еще не будет выполнен. Вы должны передать новый URL-адрес вручную getDataFromUrl

function onClickHandler() {
    console.log("Input -> "+input)
    setUrl(url =>
        url + input
    )
    getDataFromUrl(url+input)
}