时间戳

首页 > 解决方案 > 在函数调用中更改状态并发送 API 调用的值

javascript - 在函数调用中更改状态并发送 API 调用的值

问题描述

在函数调用中，我想使用 useState 和 api 调用以新值更改状态值。但是状态不会立即改变。在 callAPI() 函数调用上我没有得到新值

import React, { useState } from "react";

export default function App() {
  const originalString = "Hello this is my original string";

  const [storeString, setstoreString] = useState(
    "Hello this is my original string"
  );
  const [frontend, setFrontend] = useState(false);
  const [floating, setFloating] = useState(false);

  const callingAPI=(newvalue)=> {
    console.log(newvalue);
  };

  const handleButton = () => {
    if (frontend) {
      setstoreString(storeString.replace("original", "frontend true"));
    }else {
      setstoreString(storeString.replace("original", "frontend true"));

    }
    if (floating) {
      console.log("Current Store", storeString);
      setstoreString(storeString.replace("string", "floating true"));
    }

    callingAPI(storeString);
  };

  return (
    <>
      <button onClick={() => setFrontend(!frontend)}>Fronend</button>
      <button onClick={() => setFloating(!floating)}>Floating</button>
      <button onClick={handleButton}>Submit</button>
      <div>{storeString}</div>
    </>
  );
}

单击时我得到以前的值，但是当我第二次单击时我得到新值

标签： javascriptreactjs

解决方案

状态更新是异步的，因此您不会立即收到新值。
解决您的问题的一种干净方法是使用useEffect钩子并执行以下操作：

import React, { useState, useEffect, useRef } from "react";

export default function App() {
  const prevString = useRef();
  const [storeString, setstoreString] = useState(
    "Frontend: [false] ; Floating: [false]"
  );
  const [frontend, setFrontend] = useState(false);
  const [floating, setFloating] = useState(false);

  const callAPI = (newvalue) => {
    console.log(newvalue);
  };

  useEffect(() => {
    if (frontend && floating && prevString.current !== storeString) {
      callAPI(storeString);
    }
    prevString.current = storeString;
  }, [frontend, floating, storeString]);

  const handleButton = () => {
    setstoreString((storeString) => {
      return storeString.replace(/Frontend: \[(false|true)\]/, () => {
        return "Frontend: " + (frontend ? "[true]" : "[false]");
      });
    });
    setstoreString((storeString) => {
      return storeString.replace(/Floating: \[(false|true)\]/, () => {
        return "Floating: " + (floating ? "[true]" : "[false]");
      });
    });
  };

  return (
    <>
      <button onClick={() => setFrontend(!frontend)}>Frontend</button>
      <button onClick={() => setFloating(!floating)}>Floating</button>
      <button onClick={handleButton}>Submit</button>
      <div>{storeString}</div>
    </>
  );
}

当您使用 更新状态时setNewValue，将重新呈现组件。
随着newValue更改，useEffect钩子将被触发，您的 API 调用也会被触发。

推荐阅读