State 变量未在 onClickHandler 中更新，同时使用 Hooks 通过用户在反应中输入从 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 hooks are executing asynchronously. When you call setUrl , it will be executed in the next cycle and when you call getDataFromUrl , your setUrl is not executed yet. you should pass the new url manually to getDataFromUrl

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