Javascript 如何使用React useState多次渲染

我试图在React中定义一个函数，该函数的组件必须多次呈现，因为我在函数本身中多次更改状态。我知道useState钩子会在函数末尾重新渲染组件，那么如何在设置新状态后立即使其重新渲染呢？代码如下所示：

function App() {
  const [state, setState] = useState(0);

  const getServerState = () => {
    e.preventDefault();
    // Send something to the server and put the response on "response"
    if (response.customVar === "uploading") {
      setState(1);
      // Send another request to the server and wait for the response
      if (newResponse.customVar === "uploaded" && state === 1) {
        setState(2);
      } else {
        throw new Error("Error in uploading response");
      }
    } else {
      throw new Error("Error in response");
    }
  };

  const checkState() => {
    if (state === 0) return "Waiting for user click";
    else if (state === 1) return "Your file is being uploaded";
    else if (state === 2) return "Your file is ready!";
  };

  return (
    <div>
    {checkState()}
    <button onClick={getServerState}>
      Click me
    </button>
  </div>)
}

函数应用程序（）{
const[state，setState]=useState（0）；
常量getServerState=（）=>{
e、 预防默认值（）；
//将某些内容发送到服务器并将响应设置为“响应”
如果（response.customVar==“上传”）{
设置状态（1）；
//向服务器发送另一个请求并等待响应
如果（newResponse.customVar==“已上载”&&state==1）{
设置状态（2）；
}否则{
抛出新错误（“上传响应错误”）；
}
}否则{
抛出新错误（“响应错误”）；
}
};
常量checkState（）=>{
如果（状态===0）返回“等待用户点击”；
否则，如果（state==1）返回“您的文件正在上载”；
否则，如果（state==2）返回“您的文件已准备就绪！”；
};
返回(
{checkState（）}
点击我
)
}

---

在上面的示例中，我没有得到任何重新渲染，因为状态更改为1“太晚”，并且如果检查而状态为1，则不会通过。有解决办法吗？我无法使用useEffect钩子，因为效果将更新状态，这将导致循环。

您无法在setState之后立即获取状态，相反，您需要定义一个临时布尔变量

function App() {
  const [state, setState] = useState(0);

  const getServerState = () => {
    e.preventDefault();
    var isUploaded = false;
    // Send something to the server and put the response on "response"
    if (response.customVar === "uploading") {
      setState(1);
      isUploaded = true;
      // Send another request to the server and wait for the response
      if (newResponse.customVar === "uploaded" && isUploaded) {
        setState(2);
      } else {
        throw new Error("Error in uploading response");
      }
    } else {
      throw new Error("Error in response");
    }
  };

  const checkState() => {
    if (state === 0) return "Waiting for user click";
    else if (state === 1) return "Your file is being uploaded";
    else if (state === 2) return "Your file is ready!";
  };

  return (
    <div>
    {checkState()}
    <button onClick={getServerState}>
      Click me
    </button>
  </div>)
}

函数应用程序（）{
const[state，setState]=useState（0）；
常量getServerState=（）=>{
e、 预防默认值（）；
var=false；
//将某些内容发送到服务器并将响应设置为“响应”
如果（response.customVar==“上传”）{
设置状态（1）；
isupload=true；
//向服务器发送另一个请求并等待响应
if（newResponse.customVar==“已上载”&&isupload）{
设置状态（2）；
}否则{
抛出新错误（“上传响应错误”）；
}
}否则{
抛出新错误（“响应错误”）；
}
};
常量checkState（）=>{
如果（状态===0）返回“等待用户点击”；
否则，如果（state==1）返回“您的文件正在上载”；
否则，如果（state==2）返回“您的文件已准备就绪！”；
};
返回(
{checkState（）}
点击我
)
}

您不能在setState之后立即获取状态，相反，您需要定义一个临时布尔变量

function App() {
  const [state, setState] = useState(0);

  const getServerState = () => {
    e.preventDefault();
    var isUploaded = false;
    // Send something to the server and put the response on "response"
    if (response.customVar === "uploading") {
      setState(1);
      isUploaded = true;
      // Send another request to the server and wait for the response
      if (newResponse.customVar === "uploaded" && isUploaded) {
        setState(2);
      } else {
        throw new Error("Error in uploading response");
      }
    } else {
      throw new Error("Error in response");
    }
  };

  const checkState() => {
    if (state === 0) return "Waiting for user click";
    else if (state === 1) return "Your file is being uploaded";
    else if (state === 2) return "Your file is ready!";
  };

  return (
    <div>
    {checkState()}
    <button onClick={getServerState}>
      Click me
    </button>
  </div>)
}

函数应用程序（）{
const[state，setState]=useState（0）；
常量getServerState=（）=>{
e、 预防默认值（）；
var=false；
//将某些内容发送到服务器并将响应设置为“响应”
如果（response.customVar==“上传”）{
设置状态（1）；
isupload=true；
//向服务器发送另一个请求并等待响应
if（newResponse.customVar==“已上载”&&isupload）{
设置状态（2）；
}否则{
抛出新错误（“上传响应错误”）；
}
}否则{
抛出新错误（“响应错误”）；
}
};
常量checkState（）=>{
如果（状态===0）返回“等待用户点击”；
否则，如果（state==1）返回“您的文件正在上载”；
否则，如果（state==2）返回“您的文件已准备就绪！”；
};
返回(
{checkState（）}
点击我
)
}

这无论如何都不起作用，因为状态将立即变为2，并且checkState函数不会打印state==1的情况。我需要打印所有的状态，而不仅仅是第一个和最后一个。在重新请求服务器并获得对状态2的响应之前，您还将看到状态1。您可以临时检查以在div容器中添加{state}。问题不在容器上，而是在更改状态后重新渲染。因为React在函数完成之前不会重新渲染，所以不会获得1的状态，因为该状态将立即变为2，并且checkState函数不会打印state===1的情况。我需要打印所有的状态，而不仅仅是第一个和最后一个。在重新请求服务器并获得对状态2的响应之前，您还将看到状态1。您可以临时检查以在div容器中添加{state}。问题不在容器上，而是在更改状态后重新渲染。因为React在函数完成之前不会重新渲染，所以1不会获取状态。您是否尝试显示用户上载的状态？或者您正在试图显示服务器上的某些内容的状态？我不明白为什么不能使用useEffect。也许有了适当的条件，你就能做到这一点。你已经知道你将使用哪种抓取策略了吗？@JasonMcFarlane第二个，为了简单起见，我省略了关于服务器的所有内容，因为我认为这与React中的多次重新渲染无关。假设我首先在URL 1上发出GET请求，它会给我一个特定的响应，如果该响应是“正在上载”，我希望通过重新呈现显示状态，然后立即发出第二个请求，该请求将根据响应I生成第二个重新呈现get@Canta这是因为如果我将useffect与[state]一起使用作为第二个参数，其效果是状态本身的更新（我将在第一次状态更改后调用它），它将继续无限次调用useEffect函数。因此，当您的组件装载时，您的状态为0，“等待用户单击”，然后当用户单击时，您的状态为1“上载”或2“文件准备就绪”？您是否试图显示用户上载的状态？或者您正在试图显示服务器上的某些内容的状态？我不明白为什么不能使用useEffect。可能有适当的条件，你